Display spinner with jQuery-ui autocomplete

I've been searching all over the place and just don't see anyone doing it - Is it possible to have some kind of spinner/loader with a jQuery UI Autocomplete? (1.8) whi开发者_如何学Pythonle data is being fetched?

My solution was to use the .ui-autocomplete-loading CSS class that gets added and removed on the input element while the ajax GET request is in process:

input[type='text'].ui-autocomplete-loading {
    background: url('/icons/loading.gif') no-repeat right center;
}

Granted it's not a very flexible solution since you can't display the spinner outside the input element but in my case it's exactly the UX I was looking for.

You should be able to put a spinner image next to the field with the autocomplete and hide it initially. Then use the callback functions to hide/show it.

Then use the search option to show the spinner and open to hide it:

v1.8 and below

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   open: function(event, ui) {
       $('.spinner').hide();
   }
});

v1.9 and up

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   response: function(event, ui) {
       $('.spinner').hide();
   }
});

CSS Solution

If the loading element is a sibling of the input control then CSS general sibling combinator (~) can be used:

.loading {
    /* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
    background-image: url(loading.gif);
}

Working example
Alternate (jQuery) solution

input[type='text'].ui-autocomplete-loading {

background:  url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif')          no-repeat
 right center;

}