Comment puis-je appliquer une animation gif de chargement à mon autosuggest?

Question

J'ai tellement de chance d'avoir ma solution sur un serveur américain, alors que mon public se trouve en Scandinavie (de l'autre côté de l'étang).

Cela rend le temps de réponse un peu lent, et n'est pas idéal lorsque j'utilise AutoComplete pour mon champ de recherche.

Pour donner quelques commentaires à l'utilisateur, je souhaite afficher un GIF de chargement animé.

Le problème est que je ne sais pas comment l'initialiser avant le rappel. La commande doit démarrer lorsque la saisie semi-automatique effectue une recherche dans la base de données et s'arrête lorsque la recherche dans la base de données est terminée.

Mon javascript ressemble à ceci:

jQuery(document).ready(function() { 
    var options = autosuggestOptions(); 
    var response = new bsn.AutoSuggest('mySearchBox', options); 
}); 

    function autosuggestOptions() 
    { 
    var options = { 
     script:"wp-content/themes/test/include/someFile.php?", 
     varname:"input", minchars: 2, delay: 200, json:true, maxresults:15, timeout: 5000, 
      callback: function (obj) { (.. do stuff here ..) } 
    }; 
    return options; 
    } 

Mon gif animé est à l'intérieur <div class="loader"></div>.

Suggestions personnes?

Answer 1

Immédiatement dans autosuggestOptions(), affichez la div. Puis cachez-le dans le rappel.

function autosuggestOptions() { 
    // Show the loader 
    $(".loader").fadeIn(); 
    var options = { 
    callback: function(obj) { 
     /* Safe to hide the loader */ 
     $(".loader").fadeOut(); 
    } 
    }; 
}