jQuery autocomplete: How to show an animated gif loading image

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">

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

The FindUsers URL returns a user list in the content.


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 }

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


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

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

select: function( event, ui ) {
action show image
}).data( "autocomplete" )._renderItem = function( ul, item ) {
action hide image

Need Your Help

Int32.TryParse() returns zero on failure - success or failure?

c# .net int

I read this from msdn about Int32.TryParse()

What does Html.HiddenFor do?

.net asp.net-mvc asp.net-mvc-2 html-helper html.hiddenfor

Although I have read the documentation on Html.HiddenFor, I've not grasped what is it used for...