Diferencia entre revisiones de «JQuery Autocomplete»

De Dos Ideas.
Saltar a: navegación, buscar
(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…')
 
(Ejemplo)
 
(No se muestran 3 ediciones intermedias de 2 usuarios)
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 parametros opcionales.  
+
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 traves del parametro 'q' lo que escribio. Debemos retornar un listado separado por lineas. Por ejemplo:
+
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 = $("#localidadAutocomplete").
 +
    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 actual del 11:14 10 may 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 = $("#localidadAutocomplete").

    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