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:

También el script; ese puedes incluirlo antes de cerrar la etiqueta 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:

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.

Relacionado:  Laravel: Loguear errores y mensajes a archivo de log con Monolog

Al probarlo, pasa lo siguiente:

Autocompletado con JavaScript

Lanzar sugerencias conforme el usuario escribe en el input

El código completo queda así:

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.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 750 suscriptores


parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/

0 Comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

A %d blogueros les gusta esto: