Entre las diversas funcionalidades y widgets que ofrece jQuery UI se encuentra la opción de autocompletado. Esta función nos permite autocompletar con JQuery UI y dar sugerencias al usuario al momento en que llena un “input box” o un cuadro de texto. Vamos a aprender cómo funciona y cómo implementarla en nuestra página web.
Lo primero que debemos realizar es acceder a la sección de “Autocomplete” en los demos de jQuery UI para poder ver las diferentes opciones que ofrece este widget. Una vez dentro, tendremos diferentes opciones a elegir para el widget de autocompletado. Dichas opciones se encuentran a mano derecha y nos permiten ir explorando a lo que podemos llegar con simples modificaciones:
1
Por el momento, estaremos trabajando con la opción básica de tal manera que será fácil aprenderla. En caso quieran trabajar con una opción diferente, pueden elegirla en el menú mostrado anteriormente.
Para poder obtener el código que realiza dicho autocompletado, debemos hacer click en el vínculo “view source code” el cual tiene una imagen de un ojo a mano izquierda:
ojo_general
Luego de hacer click, veremos el código fuente que genera dicho widget. Basta con copiar todo el código a un archivo .html local para poder tener el “Autocomplete” de jQuery UI listo para ser utilizado.
Examinando un poco más el código, veremos que está compuesto por dos secciones importantes: el script y el cuerpo. Dentro del cuerpo se encuentra en “input box” en el cual el usuario ingresa cierto texto y se le muestra una lista de sugerencias. Para este caso en particular, el id de dicho input es: “tags”. Debemos tener este id en cuenta para la sección del script.
En la sección del script vamos a poder notar que tenemos una lista llamada “availableTags”. Esta lista serán las palabras las cuales se mostrarán cuando el usuario empiece a escribir en el “input”. Dicha lista la podemos modificar y agregar nuevas palabras, así también como quitar algunas de ellas. Debemos tener en cuenta que las palabras irán apareciendo de acuerdo al orden en que las hayamos puesto. La idea es que cuando el usuario escriba cualquier texto en el “input”, se buscará dentro de aquella lista y se mostrarán los resultados que coincidan. A continuación, se muestra un ejemplo funcional de dicho widget:
2