seguramente habreis visto en Google o en algun otro buscador que cuando empezais a escribir en el cuadro de busqueda, empieza a aparecer una lista de las posibles opciones entre las cuales podemos elegir la que más nos interese sin tener que escribir la palabra o frase completa.
Pues bien, eso, o más bien una versión algo más simple, es lo que os voy a mostrar en este blog.
Para empezar necesitaremos la librería de JavaScript JQuery, así como un plugin de esta denominada JQuery-autocomplete. La descarga del plugin JQuery-autocomplete incluye tambien la librería JQuery, aunque desconozco la versión (como mínimo será la version 1.2.6). Pero bueno, para mostrar el funcionamiento de este plugin nos vale esa versión perfectamente.
Descarga del plugin jquery-autocomplete
Suponiendo que ya lo hemos descargado y que lo tenemos descomprimido en una carpeta copiamos estos tres archivos a la carpeta donde tenemos la página web:
- <carpeta-descomprimida>/jquery-autocomplete/jquery.autocomplete.js
- <carpeta-descomprimida>/jquery-autocomplete/jquery.autocomplete.css
- <carpeta-descomprimida>/jquery-autocomplete/lib/jquery.js
El CSS extra que copiamos define el formato del cuadro desplegable en el que aparecerán los resultados. Si lo quieres personalizar eres libre para hacerlo, siempre y cuando respetes el nombre de las clases definidas.
Cuando lo tengamos copiado, insertamos en la cabecera de la página web estas lineas escritas en color naranja:
<head><!-- Resto de cabeceras (title, meta-tags, etc...)--><script type='text/javascript' src='jquery.js'></script><script type='text/javascript' src='jquery.autocomplete.js'></script><link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" /><script type='text/javascript'>$(document).ready(function(){var datos=['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio','Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];$("#textbox").autocomplete(datos);}) ;</script></head>
Para este ejemplo suponemos que tenemos un cuadro de texto cuyo atributo id sea textbox (id="textbox"). El simbolo # indica que queremos acceder a un elemento a través de su id.
Si quisieramos incluir el mismo autocompletado en distintos cuadros de texto, se podría añadir una clase a estos campos como por ejemplo class="meses";
y en el código anterior, sustituir el $("#textbox") por $(".meses"). Al igual que en CSS, el # indica el identificador y el . indica la clase.
Tambien se le pueden añadir opciones extra de esta manera:
$("#textbox").autocomplete(datos,{autoFill: true,delay: 1000,matchCase: true,matchContains: true,max: 4,minChars: 2});
- autoFill: Completa el cuadro de texto con la opción remarcada. Por defecto es false.
- delay: Determina la cantidad de milisegundos que debe esperar para mostrar la lista de resultados sugeridos despues de escribir algo.
- matchCase: Indica que debe coincidir mayusculas y minusculas. Por defecto es false.
- matchContains: Indica que la cadena introducida no tiene porque estar al principio de las opciones sino que puede estar dentro de la palabra. Por ejemplo, al escribir "bre" apareceran como posibles resultados "Septiembre Octubre Noviembre Diciembre". Por defecto es false.
- max: Indica la cantidad máxima de resultados posibles que se pueden mostrar. Por defecto son 10.
- minChars: Especifica el número minimo de caracteres que se han de introducir para mostrar la lista de resultados posibles.
Estos son algunas opciones. Si quieres conocerlas todas, te recomiendo que visites la página de documentación de JQuery-Autocomplete.
Espero que haya sido de ayuda.
Sois libres de comentar este articulo.
No hay comentarios:
Publicar un comentario