How can I apply a loading gif animation to my autosuggest?

Question

I'm so lucky to have my solution on an US server, while my audience is located in Scandinavia (on the other side of the pond).

This makes the respons time a bit slow, and not ideal when I'm using AutoComplete for my search box.

To give the user some feedback, I want to display a animated loading GIF.

The problem is that I don't know how to initiate it before callback. The aniamtion should start when AutoComplete searches the DB, and stop when DB search is finished.

My javascript looks something like this:

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;  
  } 

My animated gif is inside <div class="loader"></div>.

Suggestions anyone?

Answer 1

Immediately within autosuggestOptions(), show the div. Then hide it within the callback.

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