progreso - Autocompletar jQuery: Cómo mostrar una imagen de carga de gif animada

mensaje procesando php

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 FindUsers devuelve una lista de usuarios en el contenido.

Answer 1

Si no hay resultados, no funciona, puede hacer esto:

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

Answer 2

autocompletar ya agrega la clase ui-autocomplete-loading (durante la carga) que se puede usar para esto ...

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

Answer 3

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

donde el trabajo de la clase CSS se define de la siguiente manera:

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

EDITAR

La answer de Sam es un mejor enfoque para abordar el problema