Display spinner with jQuery-ui autocomplete

G

4

23

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?

Guyenne answered 25/3, 2010 at 21:24 Comment(0)

C

47

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

Cassiterite answered 25/3, 2010 at 21:37 Comment(6)

The problem with this solution is the spinner is not hidden if the response contains zero results because open event doesn't get generated in that case. The control should really have a "search completed" event to be called irrespective of result count. The planning wiki wiki.jqueryui.com/w/page/12137709/Autocomplete makes reference to such an event called "response" but it doesn't seem have been implemented yet. – Preoccupied 23/10, 2011 at 1:10

Apprently jQuery UI 1.9 includes a fix for this issue bugs.jqueryui.com/ticket/6777 – Preoccupied 23/10, 2011 at 1:21

Event "open" - not a good idea. The best way to use "response", because if autocomplete haven't return any data then "open" haven't invoke, but "response" invoke. – Debauchee 26/2, 2013 at 14:32

Correct, when I answered this the "response" event was not available. I'm editing the above answer to include the new way to do this. – Cassiterite 26/2, 2013 at 19:1

still the way to go. In my case the other answer were not applicable as I needed styling for the parent element – Faruq 15/2, 2017 at 5:11

Brilliant! Thanks! Been searching for so long and this was the only one that gave me the result I wanted - Even after so many years later! – Mahound 1/6, 2018 at 12:18

P

48

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.

Preoccupied answered 23/10, 2011 at 1:34 Comment(1)

I tried this and it ALMOST worked. It's changing the entire background to the spinner, which is not good when the background is a different color (ie: white textbox on blue background). I used the following: .ui-autocomplete-loading { background-image: url('/Content/Images/ui-anim_basic_16x16.gif'); background-repeat:no-repeat;background-position:right center; } – Boffin 31/12, 2013 at 15:15

C

47

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

Cassiterite answered 25/3, 2010 at 21:37 Comment(6)

The problem with this solution is the spinner is not hidden if the response contains zero results because open event doesn't get generated in that case. The control should really have a "search completed" event to be called irrespective of result count. The planning wiki wiki.jqueryui.com/w/page/12137709/Autocomplete makes reference to such an event called "response" but it doesn't seem have been implemented yet. – Preoccupied 23/10, 2011 at 1:10

Apprently jQuery UI 1.9 includes a fix for this issue bugs.jqueryui.com/ticket/6777 – Preoccupied 23/10, 2011 at 1:21

Event "open" - not a good idea. The best way to use "response", because if autocomplete haven't return any data then "open" haven't invoke, but "response" invoke. – Debauchee 26/2, 2013 at 14:32

Correct, when I answered this the "response" event was not available. I'm editing the above answer to include the new way to do this. – Cassiterite 26/2, 2013 at 19:1

still the way to go. In my case the other answer were not applicable as I needed styling for the parent element – Faruq 15/2, 2017 at 5:11

Brilliant! Thanks! Been searching for so long and this was the only one that gave me the result I wanted - Even after so many years later! – Mahound 1/6, 2018 at 12:18

T

7

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

Tardiff answered 1/2, 2014 at 18:22 Comment(0)

Z

-3

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;

}

Zobe answered 20/2, 2014 at 10:15 Comment(0)

Recommended topics

Hot tags