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?

19
demandé sur Salman A 2010-03-26 00:24:37

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();
   }
});
37
répondu woolyninja 2013-02-26 19:05:07

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.

43
répondu stefann 2011-10-23 01:34:06

beaucoup de js-version d'un spinner : http://fgnass.github.com/spin.js/

7
répondu Erik 2011-08-25 09:26:00

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);
}

exemple de travail

solution alternative (jQuery)

4
répondu Salman A 2018-06-26 18:41:10
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;

}
-3
répondu dmukherjee 2014-02-20 10:15:06