JQuery Autocomplete

De Dos Ideas.
Saltar a: navegación, buscar

JQuery Autocomplete es un plugin para la librería JavaScript JQuery que permite ir completando el texto faltante mientras un usuario va escribiendo. Los datos los obtiene vía ajax. Su uso mas común es en un campo de texto Html INPUT.

Ejemplo

Suponer que debemos completar la localidad a medida que el usuario va tipeando. Debemos indicarle el campo de texto, la url de donde obtener los datos y parámetros opcionales.

Suponer que tenemos el siguiente campo de texto:

<input type="text" id="localidadAutocomplete" />

Debemos contar con un servlet para obtener los posibles resultados que concuerden con lo que esta tipeando el usuario. Este plugin invoca a dicho servlet pasandole a través del parámetro 'q' lo que escribió. Debemos retornar un listado separado por lineas. Por ejemplo:

$("#localidadAutocomplete").autocomplete('<html:rewrite page="/LocalidadBuscador.do"/>', { minChars:3 });

Con esta configuración el plugin se va a activar cuando se ingresen tres caracteres. Si por ejemplo ingreso "CAP", se invocara al servlet de la siguiente forma: /LocalidadBuscador.do?q=CAP

Parametros adicionales

Un caso muy comun es querer pasarle parámetros adicionales a nuestro servlet, como ser en nuestro ejemplo el codigo de la provincia. Es posible modificar dinamicamente el plugin de la siguiente forma:

var localidad = $("#localidadAjax").

    autocomplete('<html:rewrite page="/LocalidadBuscador.do"/>', { minChars:3 });

localidad[0].autocompleter.setExtraParams({provincia:01});

Con ese codigo, nuestro servlet recibirá adicionalmente al parámetro 'q', el parámetro 'provincia' con el valor '01'.


Ver también