Resumen: mostrar cómo usar librería awesomplete para autocompletar datos de un campo con JavaScript, mostrando una lista de sugerencias conforme el usuario escribe en el input.

Nota: si quieres autocompletar datos con PHP y esta librería mira este post.

Awesomplete – Autocompletar input

En este post te mostraré cómo usar una librería simple, sin dependencias y fácil de usar para autocompletar elementos en un input sin escribir nada de JavaScript.

Estoy hablando de Awesomplete, una librería que es ligera pero poderosa.

Descargar awesomplete

Primero debes ir al siguiente enlace:

https://github.com/LeaVerou/awesomplete/archive/gh-pages.zip

Eso descargará un archivo zip. Solo necesitas copiar a tu proyecto los siguientes:

• awesomplete.base.css
• awesomplete.theme.css
• awesomplete.min.js

Incluir archivos

En tu documento HTML dentro de head incluye los estilos:

See the gist on github.

También el script; ese puedes incluirlo antes de cerrar la etiqueta body:

See the gist on github.

Eso es todo lo que necesitas.

Sugerencias en input al escribir

Ahora veamos cómo mostrar una lista desplegable en un input, es decir, autocompletar. Aunque hay varias formas, vamos a hacerlo con HTML puro.

Comenzamos agregando la clase awesomplete al input. Además de eso, necesitamos atributos data que si bien no son todos, son los más relevantes:

• data-list: una lista de los valores que se van a autocompletar; separados por coma
• data-minChars: el mínimo de caracteres para comenzar a autocompletar

Así que:

See the gist on github.

En la línea 2 estoy agregando la clase; después especifico la lista en la línea 7 y finalmente configuro el autocompletado en JavaScript para que lance las sugerencias con al menos 1 carácter escrito.

Al probarlo, pasa lo siguiente:

El código completo queda así:

See the gist on github.

Si quieres puedes probar el ejemplo en vivo aquí.

Conclusión

De este modo autocompletamos valores estáticos; pronto traeré un tutorial para traer valores de una base de datos usando fetch y PHP.

Puedes hacer bastantes cosas simplemente especificando el atributo data-list pues podrías generar el HTML desde un lenguaje de servidor; por ejemplo, PHP.

En el siguiente ejemplo que traeré veremos cómo usar más esta librería a través de JavaScript; mientras tanto puedes darle un vistazo a la página oficial.

Actualización: ya existe el tutorial de autocompletado con PHP, AJAX y MySQL.