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?
5
A
Respuesta
8
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/
4
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.
Cuestiones relacionadas
- 1. Muestra la imagen que se carga mientras se realiza $ .ajax
- 2. ¿Cómo se muestra la imagen de carga cuando se está cargando una imagen grande?
- 3. Pantalla * navegador * indicador de carga (como cuando se realiza una devolución de datos) en llamadas ajax
- 4. ¿Cómo se muestra el icono en la barra de título de QDockWidget?
- 5. ¿Cómo se realiza la validación de dirección?
- 6. ¿Cómo se especifica el icono de py2app?
- 7. UIActivityIndicatorView no se muestra hasta después de la carga realizada
- 8. vim congelado cuando se utiliza la función de autocompletar
- 9. iOS: Barra de estado negra cuando se muestra la imagen de carga
- 10. jQueryUI Autocompletar se muestra en lugar equivocado cuando se utiliza en el campo de entrada div con posición: fijo
- 11. UIBarButtonItem icono blanco cuando se agrega a través de IB, negro cuando se agrega mediante programación
- 12. ¿Cómo se realiza la transición del navegador de origen github?
- 13. ¿Dónde se realiza la validación?
- 14. Javascript Sintaxisaluminación perdida cuando se realiza una llamada AJAX
- 15. ¿Por qué el icono de la aplicación se muestra en blanco en la configuración de iCloud?
- 16. Se carga mscorlib.dll/mscoree.dll cuando se ejecuta la aplicación .NET
- 17. Ocultar el teclado cuando se envía una búsqueda o se elige una sugerencia de búsqueda
- 18. ¿Cómo se realiza la firma de código en Xcode 4.5
- 19. UIPopoverView se distorsiona cuando se muestra el teclado + iPad
- 20. JQuery - ¿Verificar cuando se carga la imagen?
- 21. Cómo cambiar el controlador de vista predeterminado que se carga cuando se inicia la aplicación?
- 22. ¿Dónde se realiza la anulación de funciones?
- 23. Los mensajes de validación se muestran cuando carga la página
- 24. ¿Cómo se realiza el enlace de datos bidireccional en WPF?
- 25. ¿Cómo se muestra ajax cargando animación GIF mientras se carga la página?
- 26. Ocultar el icono del iniciador de aplicaciones en la barra de título cuando se inicia la actividad en android
- 27. El script de Greasemonkey solo se ejecuta cuando se carga la página
- 28. modalPanel lazy rendering cuando se muestra
- 29. UITextView selectedRange no se muestra cuando se establece mediante programación
- 30. ¿Cómo ejecutar código cuando se muestra el formulario?
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