jquery mobile - listado - Obtener jQueryUi Autocompletar para trabajar con jQueryMobile
jquery ui autocomplete (7)
$(''div'').live(''pagebeforecreate'',function(event,ui){
// do something in jquery
});
Estoy trabajando en una aplicación jQueryMobile con algunos campos de formulario que necesitan funcionalidad de autocompletar. Estoy trabajando con el complemento jQueryUi Autocomplete pero no puedo hacerlo funcionar correctamente. Funciona bien si mi formulario es la página inicial cargada en el navegador, pero no funciona si el formulario se carga más tarde a través del mecanismo de carga jQueryMobile ajax.
Las versiones con las que estoy trabajando son:
jQueryMobile: 1.0a4.1
jQueryUi: 1.8.9
jQuery: 1.4.4
Mi función de autocompletar se ve así:
$(function () {
$(''#search'').autocomplete({
source: ''/Autocomplete/SearchAutoComplete'',
minLength: 3,
select: function (event, ui) { }
});
});
Mi idea es que esto debe estar conectado a la página activa actual, pero no estoy seguro de cómo hacerlo. ¿Alguien me puede decir cómo lograr esto?
Además, no estoy vinculado a la solución de autocompletar jQueryUi. Si hay una mejor manera de hacerlo, házmelo saber.
Gracias,
Greg
No estoy seguro de si es aplicable en su caso, pero una solución alternativa sería agregar el atributo data-ajax = "false" para evitar que la página sea cargada por ajax.
http://jquerymobile.com/demos/1.0a4.1/#docs/pages/link-formats.html
Ahora que JQuery Mobile ha madurado bastante y se está acercando a su versión 1.0, decidí probarlo para que funcione correctamente. He tenido mucho éxito, así que me gustaría compartir la solución aquí.
Aquí están las versiones con las que estoy trabajando actualmente (a partir del 01-feb-2012):
jQuery Mobile 1.0.1
jQuery 1.6.4
jQuery UI 1.8.12
El orden en que se hace referencia a los scripts es crítico. Necesita ser jQuery, jQuery UI, jQuery Mobile, y luego el último script personalizado. Mi encabezado de página se ve así:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1" />
<title>My jQM App</title>
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.12/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.mobile/1.0.1/jquery.mobile-1.0.1.min.js" type="text/javascript"></script>
<script src="/Scripts/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="/Content/style.css" />
</head>
Todo el código de autocompletar debe estar en un archivo .js separado y debe ser el último archivo vinculado. En esta muestra, el mío es script.js.
A continuación, asegúrese de que todos los div de su página (data-role = ''page'') también tengan un id. Por ejemplo, en mi página de búsqueda tengo
<div data-role="page" id="searchPage">
Ahora que todo el div de la página tiene identificadores, puede enlazar al evento jcuery mobile pagecreate para ese div. En una página jQuery estándar, tendrías algo como esto para la autocompletar:
$(''#search'').autocomplete({
source: ''/Autocomplete/SearchAutoComplete'',
minLength: 3,
select: function (event, ui) { }
});
Para hacer el equivalente pero tenerlo conectado a la página específica div se ve así:
$(''#searchPage'').live(''pageinit'', function (event) {
$(''#search'').autocomplete({
source: ''/Autocomplete/SearchAutoComplete'',
minLength: 3,
select: function (event, ui) { }
});
});
Esto ha estado funcionando bien para mí hasta ahora. Pude eliminar la mayoría de los atributos de data-ajax = "false" que tenía instalados como solución alternativa. Esto, a su vez, ha resultado en un mejor rendimiento de la aplicación. De ninguna manera he realizado una prueba de compatibilidad exhaustiva entre jQuery UI y jQuery Mobile, por lo que su kilometraje puede variar. Por favor, deje un comentario aquí si tiene algún problema con este método. Buena suerte.
Para referencia futura, recientemente lancé un complemento autocompletado escrito específicamente para usar con jQuery Mobile:
jQuery Mobile ahora tiene autocompletar, donde los resultados se llenan en una vista de lista. Su página de demostración contiene excelentes ejemplos sobre cómo implementarla, tanto para datos locales como remotos.
He hecho un montón de búsqueda. El tipo de autocompletar jQuery UI funciona para modificar un cuadro de texto de escritura. El cuadro de búsqueda de filtro de jQuery Mobile simula una autocompetencia, pero realmente no me pareció muy útil su uso con un formulario de recopilación de datos real.
Este artículo me ayudó a comenzar a utilizar el autocompletado de jQuery UI, pero seguí entrando en problemas de formato. Terminé escribiendo mi propio ajax (por el momento) autocompletado y pensé que lo compartiría. La fuente está ahí para que pueda modificarla como mejor le parezca. Tal vez alguien puede tomarlo y mejorarlo o simplemente usarlo tal como está.
http://schworak.com/blog/e75/jquery-mobile---autocomplete-text-input/
Recientemente lancé un componente autocompletar con cero dependencia. (no-jQuery)
Esto es totalmente compatible con la mayoría de los navegadores móviles como Android, iOS.