Autocompletar con PHP y AJAX

Autocompletado AJAX con PHP y MySQL

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:

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í.

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

Encantado de ayudarte


Estoy disponible para trabajar en tu proyecto, modificar el programa del post o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.

No te pierdas ninguno de mis posts

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

3 comentarios en “Autocompletado AJAX con PHP y MySQL”

  1. Hola, espero me puedas responder ya que es un hilo bastante viejo, pero estoy haciendo un sistema de ventas y este autocompletar me viene perfecto para buscar los productos en el input, solo queria preguntar que deberia modificar para que al seleccionar uno de los datos el formulario me envie los datos al seleccionar o hacer click en este?

    Gracias de antemano.

  2. Comparto una alternativa al archivo que filtra los datos, esperando tus comentarios y opinión sobre dicha solución, de ser posible:

    include(‘conexion.php’);

    $conn = OpenCon();
    $busqueda = $_GET[“nombre”];
    $miArreglo = array();
    $sql = “SELECT * FROM mascotas where nombre like ‘%$busqueda%’ “;
    if (mysqli_query($conn, $sql)) {
    $result = mysqli_query($conn, $sql);
    while($row = $result->fetch_assoc()) {
    $miarreglo[] = $row;
    }
    echo json_encode($miArreglo);
    } else {
    echo “Error: ” . $sql . “” . mysqli_error($conn);
    }
    CloseCon($conn);
    }

    conexion.php ——

    function OpenCon(){
    $dbhost = “localhost”;
    $dbuser = “root”;
    $dbpass = “”;
    $db = “nombredb”;
    $conn = new mysqli($dbhost, $dbuser, $dbpass,$db) or die(“Falló: %s\n”. $conn -> error);
    return $conn;
    }
    function closeCon($conn){
    $conn->close();
    }

    Muchas gracias por compartir tu conocimiento.
    ¡Saludos!

Dejar un comentario