live search php

[Alexis88]

Si lo que deseas es tomar más datos desde la consulta y establecerlos en otras cajas de texto, solo necesitas hacer lo siguiente:

Supongamos que, además del nombre, se va a tomar el apellido, y quiero colocar dicho dato en otro campo, primero necesito tomarlo a partir de su identificador; luego, en el método select establezco los valores que retorna la consulta en los respectivos campos.

Código HTML:

<form>
    <section>
        <label>Buscar por nombre:</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>
 

Código Javascript:

let inputBuscar = document.querySelector("[name=buscar]"),
    inputNombre = document.querySelector("[name=nombre]"), //El <input> del nombre
    inputApellido = document.querySelector("[name=apellido]"), //El <input> del apellido
    auto = new autocomplete();
 
auto.load({
    words: "buscar.php",
    target: inputBuscar,
    value: "nombre", //Esto solo se utiliza para indicar qué dato se va a mostrar en la lista desplegable
    async: true,
    select: function(data){
        inputNombre.value = data.nombre; //Aquí establezco el nombre
        inputApellido.value = data.apellido; //Y aquí el apellido
    }
});
 

Código PHP:

<?php
$mysqli = new mysqli('localhost', 'root', '', 'testing');
 
if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
 
$dato = $mysqli->real_escape_string($_GET['term']);
$query = "SELECT * FROM buscar WHERE nombre 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'], //El nombre
            'apellido' => $rows['apellido'] //El apellido
        ];
    }
}
 
echo json_encode($respuesta);
?>
 

Fíjate que ya no empleo la variable inputFinal, la cual estabas repitiendo, sino que uso inputNombre para establecer el nombre, e inputApellido para el apellido.

IMPORTANTE: Debido a que se está realizando un cambio a nivel de la capa de presentación (JavaScript y HTML), necesitas actualizar la ventana con la combinación de teclas CTRL + F5 para que se ejecute el código actualizado. No olvides colocar aquí el mensaje de error que se muestra en la consola del navegador en caso de que no funcione.