Necesito mostrar eso en el div separado (entonces .ui-autocomplete-loading no es aplicable aquí). Puedo comenzar a mostrar que cuando ocurrió el evento search. Pero, ¿cómo puedo entender cuándo debería ocultarse?¿Cómo se muestra el icono de carga cuando se realiza la búsqueda de autocompletar?
Supongo que está utilizando una fuente de datos remota. Si es así, use $.ajax dentro de una función que suministre al parámetro source. Por ejemplo:
$("#auto").autocomplete({
source: function(request, response) {
$("#loading").show(); // Where #loading is the loading indicator
$.ajax({
url: "Your_URL_HERE",
data: request.term,
success: function(data) {
response(data);
$("#loading").hide();
},
error: function() {
$("#loading").hide();
}
});
}
});
Ejemplo de trabajo:http://jsfiddle.net/gKFJU/
CSS Solución
Si el elemento de carga es un hermano del control de entrada entonces selector de hermanos en general CSS se puede utilizar:
.loading {
/* whatever */
}
#autocomplete.ui-autocomplete-loading ~ .loading {
background-image: url(loading.gif);
}
jQuery Solución
puede agregar el search y response controladores de eventos.
$("#autocomplete").autocomplete({
delay: 500,
minLength: 3,
source: "/search.json",
search: function() {
$("#loading2").show();
},
response: function() {
$("#loading2").hide();
}
});
Tenga en cuenta que este enfoque sufre de condiciones de carrera ya las solicitudes (i) AJAX no necesariamente terminar en el orden en que se iniciaron (ii) autocompletar puede disparar un menor número de eventos de respuesta que busca.
yo probamos este y encontró el elemento de carga a veces quedan ocultos antes de que se actualiza el menú. Intenté ocultarlo en el evento 'completo' de ajax, pero no mejoró. Lo único que he hecho que funciona es ocultarlo en los eventos de autocompletar 'open' y' close'. ¿Alguna idea de por qué este sería el caso? El comportamiento parece indicar que a veces hay un retraso para que el menú se actualice * después de que * el ajax se complete. – billynoah
@billynoah esto se debe a una condición de raza. Por ejemplo: el usuario escribe "foo" que dispara un XHR con term = "foo", luego escribe "bar" que dispara otro XHR con term = "foobar". Supongamos que la solicitud "foo" se completa primero; lo que significa que ocultas el ícono de carga. Pero el menú no se mostrará porque la función autocompletar espera a que se complete la solicitud "foobar" para mostrar el menú. Tenga en cuenta que el plugin maneja las condiciones de carrera detrás de escena y maneja inteligentemente las solicitudes AJAX fuera de orden. –
bien gracias. Supongo que en ese caso usar los eventos 'abrir' y' cerrar' es mejor para eliminar el elemento de carga solo cuando el complemento ha completado todas las solicitudes actuales. ¿Estás de acuerdo? ¿Puedes pensar en alguna mejor manera de manejar esto? – billynoah