Affichage spinner avec jQuery-ui autocomplete
j'ai cherché partout et je ne vois personne le faire-est-il possible d'avoir une sorte de spinner/loader avec un jQuery UI Autocomplete? (1.8) tandis que les données sont récupérées?
5 réponses
vous devriez être capable de mettre une image de spinner à côté du champ avec l'autocomplete et de la Cacher initialement. Ensuite, utilisez les fonctions de rappel pour cacher/montrer.
Puis utiliser l'option de recherche pour afficher le compteur et ouvert à cacher:
v1.8 et moins
$( ".selector" ).autocomplete({
search: function(event, ui) {
$('.spinner').show();
},
open: function(event, ui) {
$('.spinner').hide();
}
});
v1.9 et
$( ".selector" ).autocomplete({
search: function(event, ui) {
$('.spinner').show();
},
response: function(event, ui) {
$('.spinner').hide();
}
});
ma solution était d'utiliser le .ui-autocomplete-loading classe CSS qui est ajoutée et supprimée sur l'élément input pendant que la requête ajax GET est en cours:
input[type='text'].ui-autocomplete-loading {
background: url('/icons/loading.gif') no-repeat right center;
}
Certes, ce n'est pas une solution très flexible puisque vous ne pouvez pas afficher le spinner en dehors de l'élément d'entrée mais dans mon cas, c'est exactement le UX que je cherchais.
beaucoup de js-version d'un spinner : http://fgnass.github.com/spin.js/
Solution CSS
si l'élément de chargement est un frère ou une sœur du contrôle d'entrée, alors CSS General sibling combinator ( ~ ) peut être utilisé:
.loading {
/* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
background-image: url(loading.gif);
}
input[type='text'].ui-autocomplete-loading {
background: url('http://www.hsi.com.hk/HSI-Net/pages/images/en/share/ajax-loader.gif') no-repeat
right center;
}