jQuery autocompletar: Cómo mostrar una imagen de carga de gif animado

Question

Estoy usando el complemento jQuery AutoComplete combinado con ajax. ¿Sabes cómo puedo mostrar un indicador de progreso mientras se realiza la búsqueda de Ajax?

Este es mi código actual.

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

La URL de FindUsers devuelve una lista de usuarios en el contenido.

Answer 1

autocompletar ya suma la clase ui-autocomplete-loading (durante la duración de la carga) que se puede usar para esto ...

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

Answer 2

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

donde trabajo clase CSS se define de la siguiente manera:

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

EDITAR

de Sam answer es un mejor enfoque para abordar el problema

Answer 3

Si no hay resultados, no se trabaja se puede hacer esto:

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