Diferencia entre revisiones de «JQuery Autocomplete»
(Página creada con 'Category:JQuery JQuery Autocomplete es un plugin para la librería JavaScript JQuery que permite ir completando el texto faltante mientras un usuario va escribie…') |
|||
| Línea 3: | Línea 3: | ||
==Ejemplo== | ==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 | + | 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: | Suponer que tenemos el siguiente campo de texto: | ||
| Línea 11: | Línea 11: | ||
</code> | </code> | ||
| − | 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 | + | 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: |
<code html4strict> | <code html4strict> | ||
| − | $("#localidadAutocomplete").autocomplete('<html:rewrite page="/LocalidadBuscador.do"/>', { minChars:3 }); | + | $("#localidadAutocomplete").autocomplete('<html:rewrite page="/LocalidadBuscador.do"/>', |
| + | { minChars:3 }); | ||
</code> | </code> | ||
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 | 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: | ||
| + | |||
| + | <code html4strict> | ||
| + | var localidad = $("#localidadAjax"). | ||
| + | autocomplete('<html:rewrite page="/LocalidadBuscador.do"/>', { minChars:3 }); | ||
| + | |||
| + | localidad[0].autocompleter.setExtraParams({provincia:01}); | ||
| + | </code> | ||
| + | |||
| + | Con ese codigo, nuestro servlet recibirá adicionalmente al parámetro 'q', el parámetro 'provincia' con el valor '01'. | ||
| + | |||
| + | |||
| + | ==Ver también== | ||
| + | * [[JQuery]] | ||
| + | * [http://www.pengoworks.com/workshop/jquery/autocomplete.htm Pagina del plugin JQuery Autocomplete] | ||
Revisión del 17:55 19 ene 2010
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'.
