Como hacer un autocompletador con AJAX y PHP

12/03/20200 comentarios

Hola a todos, hoy os voy a explicar como podemos hacer un autocompletador con AJAX y PHP.

Si queremos crear un autocompletador necesitamos lo primero una base, os propongo esta:


<!DOCTYPE html>
<html lang="en">

<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">
    <script src="main.js"></script>
    <title>Autocompletador</title>
</head>

<body>

    <label for="name">Escribe un nombre:</label>
    <input list="names" name="name" id="name" onkeyup="buscarPersonas()" />
    <datalist id="names">

    </datalist>

</body>

</html>

DataList es un elemento de HTML5 que lo que hace es mostrar las coincidencias de las opciones que haya dentro del datalist. Ahora mismo lo tenemos vacio, porque nosotros desde JavaScript lo vamos a generar.

El evento onkeyup salta al escribir una letra en el input, que llamara a la función buscarPersonas.

Para que funcione el datalist, se debe asociar al input mediante el atributo list en el input y el id del datalist.

Ahora en el fichero javascript:


function buscarPersonas() {

    let busqueda = document.getElementById("name").value;

    if (busqueda.length >= 3) {
        // creo el objeto que realizara la llamada
        let llamada = new XMLHttpRequest();

        // url del php a llamar
        let url = "filtrar-nombres.php";

        // Indico los parametros que voy a mandar
        let params = "busqueda=" + busqueda;

        // Funcion que se ejecutara al recibir la respuesta
        llamada.onreadystatechange = function () {
            // si todo esta bien
            if (this.readyState === 4 && this.status === 200) {

                let nombres = JSON.parse(this.responseText);
                let datalist = document.getElementById("names");
                datalist.innerHTML = "";
                for (let nombre of nombres) {
                    let option = document.createElement('option');
                    let text = document.createTextNode(nombre);
                    option.appendChild(text);
                    datalist.appendChild(option);
                }

            }
        }

        // Indico que es una peticion POST
        llamada.open("POST", url, true);
        // Esta linea es necesaria en una peticion POST
        llamada.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        llamada.send(params); // Le paso los parametros
    } else {
        let datalist = document.getElementById("names");
        datalist.innerHTML = "";
    }

}

Aquí cogemos el valor del input y cuando la longitud es mas de 3, aunque esto es opcional.

Le pongo la url del fichero PHP y le añado el parámetro búsqueda el valor que hemos cogido del input.

Dentro de la respuesta recibida, convierto la respuesta e inserto los nombres recogidos en elementos option dentro del datalist.

Si necesitáis mas detalles de como hacer una llamada AJAX, os dejo el manual donde lo vimos:

Como enviar una petición AJAX con POST con parametros

En el PHP tendremos esto:


<?php

require 'conexion.php';

$busqueda = strtolower(str_replace("'", "", $_POST['busqueda']));

$resultado = mysqli_query($conexion, "select * from nombres where lower(nombre) LIKE '%" . $busqueda . "%'");

$data = array();

while ($fila = mysqli_fetch_assoc($resultado)) {
    array_push($data, $fila['nombre']);
}

echo json_encode($data);

?>

Nos conectamos a nuestra base de datos, recordar que esto ya lo vimos, os dejo el manual:

https://www.discoduroderoer.es/conectar-mysql-con-php/

Recojo el valor de búsqueda que le he pasado (quito comillas simples para evitar problemas en la consulta).

Ejecuto la consulta, recojo los datos y con json_encode lo transformo a JSON para que lo pueda recoger el AJAX.

Necesitamos una base de datos donde recoger los datos, os la paso yo por aquí:


SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


CREATE TABLE `nombres` (
  `nombre` varchar(80) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

INSERT INTO `nombres` (`nombre`) VALUES
('Fernando'),
('Manuel'),
('Victor'),
('Marta'),
('MAr'),
('Federico'),
('Francisco'),
('Vicente'),
('Manuela'),
('Pepe'),
('Jose'),
('Jose MAria');
COMMIT;

Este es el resultado final: