Foros del Web - Ver Mensaje Individual

Alexis88 · #22 (**permalink**) 01/04/2021, 19:05

Voy a tratar de ponerlo lo más simple posible.

En un nuevo proyecto (uno pequeño, de prueba), ten estos archivos:

1. Un archivo HTML:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title>Buscador</title>
</head>
<body>
    <form>
        <section>
            <label>Buscar por nombre:</label>
            <input type="search" name="buscar" autofocus />
        </section>
 
        <section>
            <label>Resultado seleccionado:</label>
            <input type="text" name="nombre" readOnly />
        </section>
    </form>
 
    <script type="text/javascript" src="autocomplete-5.0.js"></script>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

2. Un archivo JS (en este caso, lo nombraré "script.js"):

Código Javascript:

Ver originallet inputBuscar = document.querySelector("[name=buscar]"),
    inputFinal = document.querySelector("[name=nombre]"),
    autocomplete = new autocomplete();
 
autocomplete.load({
    words: "buscar.php",
    target: inputBuscar,
    value: "nombre",
    async: true,
    select: function(data){
        inputFinal.value = data.nombre;
    }
});

3. Un archivo PHP:

Código PHP:

Ver original$mysqli = new mysqli('server', 'user', 'password', 'database');
 
if ($mysqli->connect_errno) exit('No se pudo realizar la conexión: ' . $mysqli->connect_error);
 
$dato = $mysqli->real_escape_string($_GET['term']);
$query = "SELECT nombre FROM tabla 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']];
    }
}
 
echo json_encode($respuesta);

Ten todos los archivos en el mismo directorio (para fines de la prueba). Para esto, necesitas tener una base de datos que contenga una tabla con el campo "nombre" y, por supuesto, que posea datos para dicho campo. Todo esto tenlo en un nuevo directorio en tu servidor web, y ejecútalo como un proyecto nuevo.

IMPORTANTE: Recuerda que estoy empleando datos de ejemplo, como los datos de conexión a la base de datos, la tabla y el campo de la tabla. Tienes que reemplazarlos por datos reales que estés utilizando. En el caso de que no obtengas resultados, fíjate en la consola del navegador (pulsa la tecla F12 y selecciona la pestaña Console antes de ejecutar el código) para corroborar si se está mostrando algún mensaje de error. En caso de haberlo, por favor, muéstralo acá, de otro modo, no se te podrá ayudar. Si realizas algún cambio, antes de volver a probar es necesario que pulses la combinación de teclas CTRL + F5 para que se limpie la caché del navegador y, de este modo, se ejecute el código actualizado. Trata de seguir lo explicado paso a paso para que no tengas más problemas.