viernes, 6 de julio de 2012

Autocompletar un cuadro de texto en jQuery Mobile

Enunciado:

Tenemos la clásica búsqueda con un cuadro de texto al que normalmente desplegaríamos un lista de sugerencias a medida que escriben. En una aplicación de escritorio ASP.NET usariamos el componente autocomplete de AJAX.NET o de jQuery UI. Pero ¿En una aplicación móvil?

Solución:

Usar jQuery y el componente jQM Autocomplete de Andy Matthews.
Si haces clic en el vínculo llegaras a una demo y te enamoraras como lo hice yo.

Desarrollo de la solución

Necesitaras un servicio JSON que te entregue las sugerencias de palabras. Si desarrollas en ASP.NET puedes consultar mi post Desarrollo de un servicio json sobre ASP.NET para consumo desde Jquery
En mi caso además estaba buscando nombres de empresa en una base de datos por lo que dispongo del identificador único de registro.
Por eso devuelvo un array de objetos con dos propiedades de texto "label" y "value" .
Esta es la respuesta JSON:

[{"label":"INCOAZUL","value":"353"},{"label":"AZULIBER","value":"18"},{"label":"AZULEJERA ALCORENSE","value":"62"},{"label":"MAYOLICA AZULEJOS, S.L.","value":"60"},{"label":"AZULEJOS ALCOR","value":"61",{"label":"AZULINDUS & MARTI, S.A.","value":"13"},{"label":"NOMAZUL, S.A.","value":"85"}}] Este un ejemplo código de página:

    Que completaríamos con esté código JavaScript
           $(document).ready( function (e) {
             $("#busqueda").autocomplete({
                 method: 'GET',
                 target: $('#sugerencias'),
                 source: "/MAC.svc/NomIdEmpresa",
                 link: 'ficha?id=',
                 minLength: 3
             });
         });
     
    
    Por supuesto en los encabezados debes incluir las referencias a las librerias y estilos jQuery, jQuery Mobile y jQM autocomplete.
    Observarás que en la parte java especifico un enlace ficha?id= que se completará al final con el campo value que me devuelve el JSON. Asi cuando clicken en INFOAZUL navegaremos hacia ficha?id=353.
    Sin embargo, esta no es la solución optima, lo mejor sería cambiar a una página móvil ya cargada y actualizarla con los datos leidos con un llamada a un servicio JSON datosEmpresa(idEmpresa). 
    Es mi próximo objetivo, así que....continuará en próximas entregas

    No hay comentarios: