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:
<head>
<link rel="stylesheet" href="awesomplete.base.css">
<link rel="stylesheet" href="awesomplete.theme.css">
</head>
También el script; ese puedes incluirlo antes de cerrar la etiqueta body:
<body>
<script type="text/javascript" src="awesomplete.min.js"></script>
</body>
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:
<input
class="awesomplete"
type="text"
id="nombre"
autocomplete="off"
placeholder="Nombre de comida"
data-list="Tacos,Pizza,Hamburguesa,Pozole,Papas fritas"
data-minChars="1">
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í:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Autocompletado con JavaScript</title>
<!--
No olvides incluir los estilos
-->
<link rel="stylesheet" href="awesomplete.base.css">
<link rel="stylesheet" href="awesomplete.theme.css">
</head>
<body>
<h1>Probando Autocompletado</h1>
<a href="https://parzibyte.me/blog/">By parzibyte</a>
<br>
<label for="nombre">Escribe el nombre de una comida:</label>
<br>
<input
class="awesomplete"
type="text"
id="nombre"
autocomplete="off"
placeholder="Nombre de comida"
data-list="Tacos,Pizza,Hamburguesa,Pozole,Papas fritas"
data-minChars="1">
<!--
El script
-->
<script type="text/javascript" src="awesomplete.min.js"></script>
</body>
</html>
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.