Display spinner with jQuery-ui autocomplete

Question

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) while data is being fetched?

Answer 1

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.

Answer 2

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