css - spinner jquery bootstrap




Display spinner con jQuery-ui autocompletado (4)

Debería poder colocar una imagen giratoria junto al campo con el autocompletado y esconderlo inicialmente. Luego usa las funciones de devolución de llamada para ocultarlo / mostrarlo.

Luego use la opción de búsqueda para mostrar el control de giro y abra para ocultarlo:

v1.8 y por debajo

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   open: function(event, ui) {
       $('.spinner').hide();
   }
});

v1.9 y hasta

$( ".selector" ).autocomplete({
   search: function(event, ui) { 
       $('.spinner').show();
   },
   response: function(event, ui) {
       $('.spinner').hide();
   }
});

He estado buscando por todo el lugar y no veo a nadie que lo haga. ¿Es posible tener algún tipo de girador / cargador con un jQuery UI Autocomplete? (1.8) mientras se están recuperando los datos?



Solución CSS

Si el elemento de carga es un hermano del control de entrada, se puede usar el combinador general de hermanos CSS (~):

.loading {
    /* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
    background-image: url(loading.gif);
}

Ejemplo de trabajo
Solución alternativa (jQuery)


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;

}




jquery-ui-autocomplete