Foros del Web - Ver Mensaje Individual

pilucho · #16 (**permalink**) 01/04/2021, 18:06

Cita:

Iniciado por Alexis88

Tienes que cambiar los id de los selectores en el código JavaScript (lo de "idInput1" e "idInput2" es de ejemplo). Además, el archivo del autocomplete tiene que estar incluido antes que el código en donde haces la instancia del objeto (el archivo scripts2.js). Asegúrate, también, de que tu variable de conexión a la base de datos en el archivo PHP sea la misma que estás usando en tu proyecto. Recuerda que el código que te muestro es de ejemplo.

hola amigo ya lo cambie al parecer no funciona. estoy usando el DB del ejemplo

index.html

Código HTML:

Ver original<!DOCTYPE html>
<html lang = "es">
    <head>
        <meta charset = "utf-8" />
        <title>Buscador</title>
        <link rel = "stylesheet" type = "text/css" href = "jquery-ui-css.css" />
        <link rel = "stylesheet" type = "text/css" href = "style.css">
        <script type = "text/javascript" src = "autocomplete-5.0.js"></script>
    </head>
    <body>
        <section id = "main">
            <label for = "buscar">Buscar:</label>
            <input type = "text" name = "buscar" id = "buscar" placeholder = "Ingresa el dato a buscar" autofocus />
        </section>
        <section id = "response">
            <img />
            <div id = "datos">
                <header>
                    <h1></h1>
                </header>
 
                <p>
                    <label class = "ref">Nombre</label>
                    <input type = "text" name = "nombre" class = "dato" />
                </p>
                
                <p>
                    <label class = "ref">Apellido:</label>
                    <label class = "dato"></label>
                </p>
 
                <p>
                    <label class = "ref">E-Mail:</label>
                    <label class = "dato"></label>
                </p>
            </div>
        </section>
        <script type = "text/javascript" src = "jquery.js"></script>
        <script type = "text/javascript" src = "jquery-ui.js"></script>
        <script type = "text/javascript" src = "script2.js"></script>
        
    </body>
</html>

script2.js

Código Javascript:

Ver originallet inputBuscar = document.querySelector("#nombre"), //<input> en donde se escribirá
    inputFinal = document.querySelector("#nombre"), //<input> en donde se mostrará el dato seleccionado de la lista desplegable
    autocomplete = new autocomplete(); //Instancia del objeto
 
autocomplete.load({
    words: "buscar2.php", //Archivo en donde se realizará la búsqueda
    target: inputBuscar, //<input> en donde se escribirá y mostrarán los resultados
    value: "nombre", //Nombre del índice que contiene el dato a mostrarse
    select: function(data){
        inputFinal.value = data.nombre; //Aquí se mostrará el dato seleccionado de la lista desplegable
    }
});

buscar2.php

Código PHP:

Ver original<?php
$dato = $_GET['term'];
$query = "SELECT * FROM buscar WHERE nombre LIKE '%$dato%'";
$results = mysqli_query($connection, $query);
$respuesta = [];
 
if (mysqli_num_rows($results)){
    while ($rows = mysqli_fetch_assoc($results)){
        $respuesta[] = ['nombre' => $rows['nombre']];
    }
}
 
echo json_encode($respuesta);
?>