Resumen: mostrar cómo autocompletar un campo con valores de una tabla de una base de datos MySQL; trayendo los datos con AJAX.

En este post te mostraré cómo sugerir nombres conforme el usuario escribe; trayendo los datos de MySQL con una consulta LIKE y usando fetch para traer los datos por AJAX en tiempo real.

La librería

Para lograr esto vamos a usar la librería awesomplete; cuya introducción ya vimos anteriormente. Si no la has visto, mírala para que veas cómo descargarla e incluirla.

Programando lado del servidor

En el servidor simplemente mostraremos un arreglo de datos que servirán para llenar la lista. Vamos a recibir un parámetro GET en la URL para la búsqueda.

Voy a usar el archivo de base de datos del tutorial de PHP con MySQL:

Ahora veamos el archivo que filtra los datos:

Lo que haremos será buscar en una base de datos de mascotas; si quieres puedes insertarlas con lo siguiente:

Al consultar con, por ejemplo, la letra a tenemos esto:

Filtrando datos en el servidor

¿Por qué no filtrar los datos del lado del cliente?

Aunque el autocompletado ya filtra los datos, siempre es importante tener un límite de datos. Imagina si fueran millones de registros, sería mejor buscar los que coinciden en el servidor, que buscarlos del lado del cliente.

La vista HTML

En el HTML de nuestro input para autocompletar importamos los estilos, el script de awesomplete y nuestro propio script para el funcionamiento:

Relacionado:  Permitir solo imágenes en input file de HTML

Lo único destacable es que el input tiene el id nombre y el autocomplete desactivado.

El script

Finalmente veamos el script de JavaScript. Primero obtenemos una referencia al input con querySelector, y creamos un objeto de tipo Awesomplete; le pasamos el input como primer argumento, y como segundo argumento un objeto de configuraciones.

En el objeto de configuraciones indicamos las sugerencias, que son un arreglo vacío al principio. También indicamos el mínimo de caracteres a 1.

En la línea 13 defino la función que refresca la lista, la cual obtendrá el valor del input (es decir, lo que el usuario haya escrito); si hay algo escrito entonces se realiza una petición con fetch y tendremos el arreglo de MySQL que mostré anteriormente.

Después de eso, asignamos el arreglo a ac.list (recuerda que ac es un objeto de tipo Awesomplete) pero antes de eso lo mapeamos, pues Awesomplete requiere un arreglo plano, o un arreglo de objetos con la clave label (que es lo que se muestra) y value, que es lo que se coloca en el input al seleccionar una opción.

Finalmente agregamos un listener al input, para que cuando el usuario escriba se refresque la lista. Al final obtenemos el siguiente resultado:

Autocompletar con PHP y AJAXSi te fijas en la consola, se hace la petición y se refresca la lista con los datos que traiga el servidor.

Conclusión y notas finales

Por cierto, si quieres el evento cuando se selecciona el valor del autocompletado puedes agregar un listener al input. El evento que dice que se ha seleccionado (ya sea con el mouse o usando el teclado) se llama awesomplete-selectcomplete.

Si quisieras que cuando se haga la selección, en lugar del id se pusiera el nombre, al mapear el arreglo coloca el nombre en el value.

Enlaces de interés

He colocado el código completo en GitHub. Puedes verlo aquí.

Relacionado:  Instalar LAMP y phpmyadmin en Ubuntu

También puedes ver más sobre los eventos de awesomplete en su página oficial.


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: