live search php

[pilucho]

Iniciado por Alexis88

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.

Excelente ahora si quedo perfecto muchas gracias.
en esta imagen salen solo estos errores supongo que no es de importancia o si?
https:// prnt.sc/112t8f3