56 votes

jQuery autocomplete: Comment faire pour afficher un gif animé

J'utilise le jQuery AutoComplete plugin combiné avec l'ajax. Savez-vous comment puis-je afficher un indicateur de progrès, tandis que l'ajax recherche est effectuée?

C'est mon code actuel.

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

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

Le FindUsers URL renvoie une liste d'utilisateurs dans le contenu.

159voto

Sam Wilson Points 1282

la saisie semi-automatique fait déjà l' ui-autocomplete-loading classe (pour la durée de la charge) qui peuvent être utilisés pour cette...

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

47voto

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

où la classe CSS de travail est défini comme suit:

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

MODIFIER

Sam réponse est une meilleure approche pour résoudre le problème

1voto

David Points 11

Si aucun résultat n'est pas fonctionne, vous pouvez le faire:

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X