Autocomplete en jQuery
Jquery cuenta con la posibilidad de dar el comportamiento de autocompletado a un campo input de tipo text. Al dar la característica de autocompletado a un campo de texto, conforme escribamos letra a letra un texto nos surgirán sugerencias de completado. Para poder hacer uso del autocompletado necesitaremos usar el plugin autocomplete que encontraremos en: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ .
La llamada para dar la funcionalidad de autocompletado a un elemento es:
$("#divObjetivo").autocomplete(array/url).
El array pasado como parámetro debe de contener las palabras que se sugerirán. Si se suministra una url, esta url será llamada por AJAX cada vez que se modifique el campo asociado al autocomplete y debe de devolver texto plano con el siguiente formato (fijarse en el salto de linea \n):
Alicia
Anna
Angel
...
A la url que se indique se le pasará como parametro tipo Get la variable q ($_GET[“q”]) que contendrá la búsqueda actua (por ejemplo en un campo de ciudades, si empezamos a escribir alicante, se harán varias llamadas AJAX a la url destino con lo valores de $_GET[“q”] “a”, después “al”, después “ali” y asi sucesivamente.).
Las opciones se establecerán una vez sea declarado el elemento de tipo autocomplete. Se usara esta sintaxis:
$("#divObjetivo").setOptions({options});
Donde la opción mas común es {max:valor}, el valor sera el número máximo de sugerencias a mostrar. En el siguiente código se mostrará un campo autocomplete de libros donde se verán las primeras dos sugerencias encontradas:
<html>
<head>
<link rel="stylesheet" href="jquery.autocomplete.css"
type="text/css" />
<script src="jquery.js"></script>
<script type="text/javascript"
src="jquery.autocomplete.js"></script>
<script>
var libros = new Array("Alicia en el pais de la maravillas",
"Aladin",
"Angeles y demonios",
"Barba Roja",
"Celestina, La");
$(document).ready(function(){
$("#example").autocomplete(libros);
$("#example").setOptions({max: 2});
});
</script>
</head>
<body>
Libros: <input id="example" />
</body>
</html>
La visualización será la siguiente:
