live search php

[Alexis88]

Iniciado por pilucho

Muchas Gracias Alexis88 ya funciona todo esta OK. te agregue puntos por la ayuda.

tengo una consulta, si quiero buscar en dos campos distintos usando uno para el nombre y otro para el email se tiene que modificar el PHP ? o hacer dos JS y PHP distintos?

Código HTML:

<form>
        <section>
            <label>Buscar por nombre:</label>
            <input type="search" name="buscar" autofocus />
        </section>
 
        <section>
            <label>buscar por email:</label>
            <input type="search" name="buscar" autofocus />
        </section>
     
        <section>
            <label>Resultados seleccionados:</label>
            <input type="text" name="nombre" readOnly />
            <input type="text" name="apellido" readOnly />
        </section>
    </form>
 

Tendrías que añadir otra instancia del objeto de autocompletado y asociarlo a la caja de búsqueda por correo. En cuanto al archivo PHP, puedes hacer la búsqueda por nombre o correo en la misma consulta SQL. Y como supongo que buscas obtener los mismos resultados ya sea buscando por nombre o por correo, puedes emplear una sola función que recoja los datos de la opción seleccionada en la lista de autocompletado y los establezca en las cajas respectivas.

Por ejemplo:

Código HTML:

<form>
    <section>
        <label>Buscar por nombre:</label>
        <input type="search" name="byName" autofocus />
    </section>
 
    <section>
        <label>Buscar por correo:</label>
        <input type="search" name="byEmail" autofocus />
    </section>
 
    <hr />
 
    <section>
        <label>Resultados seleccionados:</label>
        <p>
            <input type="text" name="nombre" readOnly />                
        </p>
        <p>
            <input type="text" name="correo" readOnly />                
        </p>
    </section>
</form>
 

Código Javascript:

let buscarNom = document.querySelector("[name=byName]"), //<input> de búsqueda por nombre
    buscarCor = document.querySelector("[name=byEmail]"), //<input> de búsqueda por correo
    inputNombre = document.querySelector("[name=nombre]"), //<input> en donde se mostrará el nombre
    inputCorreo = document.querySelector("[name=correo]"), //<input> en donde se mostrará el correo
    autoNombre = new autocomplete(), autoCorreo = new autocomplete(), //Instancias del objeto de autocompletado
    rellenar = function(data){ //Función que recoge los datos seleccionados y los establece en las cajas
        inputNombre.value = data.nombre;
        inputCorreo.value = data.correo;
    };
 
//Instancia del objeto para buscar por nombre
autoNombre.load({
    words: "buscar.php",
    target: buscarNom,
    value: "nombre",
    async: true,
    select: rellenar
});
 
//Instancia del objeto para buscar por correo
autoCorreo.load({
    words: "buscar.php",
    target: buscarCor,
    value: "correo",
    async: true,
    select: rellenar
});
 

Código PHP:

<?php
$mysqli = new mysqli('server', 'user', 'password', 'database');
 
if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
 
//Se emplea la misma variable pues es la que utiliza el objeto de autocompletado 
$dato = $mysqli->real_escape_string($_GET['term']);
 
//Se realiza la búsqueda ya sea por nombre o correo
$query = "SELECT nombre, correo FROM personas WHERE nombre LIKE '%$dato%' OR correo LIKE '%$dato%'";
$results = $mysqli->query($query) or exit($mysqli->errno . ': ' . $mysqli->error);
$respuesta = [];
 
if ($results->num_rows){
    while ($rows = $results->fetch_assoc()){
        $respuesta[] = [
            'nombre' => $rows['nombre'], //Se devuelve el nombre
            'correo' => $rows['correo'] //Y el correo
        ];
    }
}
 
echo json_encode($respuesta);
?>
 

Aquí puedes probarlo en línea. No olvides adaptarlo a lo que tienes, borrar la caché del navegador, y mostrar aquí cualquier mensaje de error en la consola del navegador que te surja en caso de que no funcione.