jQuery autocomplete: How to show an animated gif loading image

JqueryJquery UiJquery PluginsAutocompleteJquery Autocomplete

Jquery Problem Overview


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.

Jquery Solutions


Solution 1 - Jquery

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 }

Solution 2 - Jquery

$("#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

Solution 3 - Jquery

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
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDaniel Pe&#241;albaView Question on Stackoverflow
Solution 1 - JquerySam WilsonView Answer on Stackoverflow
Solution 2 - JqueryDalenView Answer on Stackoverflow
Solution 3 - JqueryDavidView Answer on Stackoverflow