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:
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:
Os dejo un vídeo explicándolo con mas detalle:
Espero que os sea de ayuda. Si tenéis dudas, preguntad. Estamos para ayudarte.
