jQuery autocomplete: How to show an animated gif loading image

Question

I'm using the jQuery AutoComplete plugin combined with ajax. Do you know how can I show a progress indicator while the ajax search is performed?

This is my current code.

<script type="text/javascript">
    $("#autocomplete-textbox").autocomplete('http://www.example.com/AutoComplete/FindUsers');
</script>

<div>
    <input type="text" id="autocomplete-textbox" />
    <span class="autocomplete-animation"><img id="ajaxanimation" src="../img/indicator.gif")"/></span>
</div>

The FindUsers URL returns a user list in the content.

Can you show your actual markup/code that's being sent to the browser, i.e., without those Ruby/ASP/whatever `<% %>` markup? — Marcel Korpel, Dec 20 '10 at 12:30
There's still a `%>` in it; by accident, or is it that that's causing problems? — Marcel Korpel, Dec 20 '10 at 13:09

score 167 · Accepted Answer · answered Feb 22 '11 at 01:06

167

autocomplete already adds the ui-autocomplete-loading class (for the duration of the loading) that can be used for this...

.ui-autocomplete-loading { background:url('img/indicator.gif') no-repeat right center }

answered Feb 22 '11 at 01:06

Sam Wilson

4,402
4
29
30

When you use ThemeRoller, the loading gif related information gets stripped out of the download. http://bugs.jqueryui.com/ticket/6046 – camainc May 17 '11 at 16:59
3

I think that this is a better solution than the accepted answer because it accounts for when no results are returned from the search. – space_balls Feb 16 '12 at 03:59
6

and since the image is not in the themeroller download, get it from here: http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/images/ui-anim_basic_16x16.gif – commonpike Jun 29 '12 at 14:11
FWIW the animation does not work with a local (large) array based source (loaded async) for the autocomplete. Presumably because while the searching occurs, nothing else can do anything. For example: http://jsbin.com/EmikobU/1/edit – Chris Kimpton Sep 05 '13 at 12:08
1

@ChrisKimpton : in jsbin that you've pasted the animation works while searching, I don't see any problem (using latest FF). – Wookie88 Jan 28 '14 at 13:48
Thanks @Wookie88 - maybe I was using my works corp browser IE8 :( – Chris Kimpton Jan 29 '14 at 18:53

score 48 · Answer 2 · edited May 23 '17 at 12:18

48

$("#autocomplete-textbox").autocomplete
(
search  : function(){$(this).addClass('working');},
open    : function(){$(this).removeClass('working');}
)

where CSS class working is defined as follow:

.working{background:url('../img/indicator.gif') no-repeat right center;}

EDIT

Sam's answer is a better approach to address the problem

edited May 23 '17 at 12:18

Community

1
1

answered Dec 20 '10 at 13:28

Dalen

8,856
4
47
52

7

using the ui-autocomplete-loading class is more preferable as when there are no results returned this indicator stays on confusing the user – Nick Barrett Jun 15 '12 at 03:21
2

response: function(){} - Triggered after a search completes – pszaba May 16 '16 at 14:09

score 1 · Answer 3 · answered Sep 08 '11 at 16:05

1

If no results isn't works you can do this:

$("input[name='search']").autocomplete({
...,
select: function( event, ui ) {
action show image
}   
}).data( "autocomplete" )._renderItem = function( ul, item ) {
action hide image
}

answered Sep 08 '11 at 16:05

David

11
1

jQuery autocomplete: How to show an animated gif loading image

3 Answers3

Linked