[SOLUCIONADO] live search php

[pilucho]

Hola Grupo del foro

Este código funciona, despliega una lista en una <tabla> "fetch.php" al escribir en el campo de búsqueda
posteriormente en esa lista se hace clic, y muestra el resultado seleccionado en los inputs.

La, idea es que en el campo de texto, al realizar la búsqueda por nombres... me de el resultado
como un "live search" mostrando el contenido en el campo de texto. y no como una <tabla> fuera del campo de búsqueda.
de este modo al hacer clic al nombre muestre en los campos de inputs.

espero me puedan colaborar con la ayuda. si existe otro método o código estoy dispuesto aprender de ello. gracias.





fetch.php

Código PHP:

<?php
include('config.php'); 
$mydb = new db(); 
$conn = $mydb->connect();
 
if(isset($_POST["query"]))
{
 
$q = $_POST["query"];
    
$results = $conn->prepare("SELECT * FROM customer WHERE customerFN LIKE '%" . $q . "%'
OR customerID LIKE '%".$q."%'
OR customerLN LIKE '%".$q."%'
OR customerAddress LIKE '%".$q."%'
OR customerAge LIKE '%".$q."%'
");
 
}
else
{
 
 $results = $conn->prepare("SELECT * FROM customer ");
 
}
 
$results->execute();
while($row = $results->fetch(PDO::FETCH_ASSOC))
{
     echo '<tr onclick="javascript:showRow(this);">' . 
    '<td>' . $row['customerID'] . '</td>' . 
    '<td>' . $row['customerFN'] . '</td>' . 
    '<td>' . $row['customerLN'] . '</td>' .
    '<td>' . $row['customerAge'] . '</td>' .
    '</tr>';
}
?>
 

Código Javascript:

<script type="text/javascript">
$(document).ready(function(){
 
 load_data();
 
 function load_data(query)
 {
  $.ajax({
   url:"fetch.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#result').html(data);
   }
  });
 }
 
 $('#search_text').keyup(function(){
  var search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});
 
function showRow(row)
{
    var x=row.cells;
    document.getElementById("custID").value = x[0].innerHTML;
    document.getElementById("fname").value = x[1].innerHTML;
    document.getElementById("lname").value = x[2].innerHTML;
}
</script>
 

Código HTML:

<script src="js/jquery-1.11.3-jquery.min.js"></script> 
 
<!-- BUSQUEDA Y DESPLIEGA EL RESULTADO EN UNA LISTA  -->
<div class="form-group">
    <div class="input-group">
        <span class="input-group-addon">Search</span>
        <input type="text" name="search_text" id="search_text" placeholder="Search ..." class="form-control" />
    </div>
</div>
<!-- EL RESULTADO ES ASÍ  -->
|| ID   ||   FIRSTNAME    ||     LASTNAME     |||
|| 1    ||     Lily       ||    James         |||
|| 2    ||     Pablo      ||    Marmol        |||
|| 3    ||     Pedro      ||   Pica Piedra    |||
 
 
 
<!-- LA IDEA ES QUE SE VEA EN EL MISMO CUADRO DE TEXTO COMO UN LIVE SEARCH  -->
En el campo de texto Busco a: Pablo 
Resultado: Lista de palabras con 'P'
---------------------
|   Pablo Marmol    | <!-- CLIC AL NOMBRE PARA MOSTRAR EN LOS INPUT'S -->
 
 
<!-- AQUI EL RESULTADO AL HACER CLIC AL NOMBRE -->
<form class="form-horizontal" method="post">
    <div class="form-group">
        <label class="control-label col-sm-3">ID:</label>
            <div class="col-sm-9">
                  <input type="text" class="form-control" id="custID" required placeholder="Customer ID" name="custID">
            </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">First Name:</label>
            <div class="col-sm-9">
                  <input type="text" class="form-control" id="fname" required placeholder="First Name" name="fname" >
            </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">Last Name:</label>
            <div class="col-sm-9"> 
                  <input type="text" class="form-control" id="lname" required placeholder="Last Name" name="lname">
            </div>
    </div>
</form>
 

[Alexis88]

Si te refieres a que buscas mostrar una lista desplegable con los resultados de la búsqueda debajo de la caja de texto en donde se escribe el dato a buscar, esto puede servirte.

[tuadmin]

otra forma es usar javascript pero a la vez hacer uso de HTML5 el <datalist>

https://developer.mozilla.org/es/doc...ement/datalist

[pilucho]

Iniciado por tuadmin

otra forma es usar javascript pero a la vez hacer uso de HTML5 el <datalist>

https://developer.mozilla.org/es/doc...ement/datalist

muy amable tuadmin y se agradece pero me quedo en "idioma chino" y no hay ejemplos en producción, seguire esperando a ver que sugerencias mas pueda tener si se puede mejorar la idea o exista otro método similar.

[pilucho]

Iniciado por Alexis88

Si te refieres a que buscas mostrar una lista desplegable con los resultados de la búsqueda debajo de la caja de texto en donde se escribe el dato a buscar, esto puede servirte.

Hola Alexis88 gracias la idea es buena, aun que intente correr en un campo de texto y no se pudo. la idea es realizar la búsqueda y traer la info en campo de texto con el fin de enviarlo por un método POST, ya posteriormente guardarlo en el SQL

probe asi en el index.html y nada

Código HTML:

<input type = "text" name = "fname" class = "dato" />
 

[Alexis88]

Iniciado por pilucho

Hola Alexis88 gracias la idea es buena, aun que intente correr en un campo de texto y no se pudo. la idea es realizar la búsqueda y traer la info en campo de texto con el fin de enviarlo por un método POST, ya posteriormente guardarlo en el SQL

probe asi en el index.html y nada

Código HTML:

<input type = "text" name = "fname" class = "dato" />
 

Me gustaría ver qué fue lo que probaste en JavaScript y PHP para poder guiarte. ¿Intentaste descargando el ejemplo y probándolo?

[pilucho]

Iniciado por Alexis88

Me gustaría ver qué fue lo que probaste en JavaScript y PHP para poder guiarte. ¿Intentaste descargando el ejemplo y probándolo?

asi

Código HTML:

<!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">
    </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>
                    <!--<label class = "dato"></label>-->
                    <input type = "text" name = "fname" 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 = "script.js"></script>
    </body>
</html>
 

[Alexis88]

¿Qué se muestra en la consola del navegador? Ten en cuenta que en el ejemplo se usa una base de datos propia. También toma en cuenta las rutas de los archivos insertados.

[pilucho]

Iniciado por Alexis88

¿Qué se muestra en la consola del navegador? Ten en cuenta que en el ejemplo se usa una base de datos propia. También toma en cuenta las rutas de los archivos insertados.

es el db de ejemplo que pusiste de muestra y usando el mismo campo no me arroja nada la idea era que muestre el contenido en un input

Código HTML:

<label class = "ref">Nombre</label>
<!--<label class = "dato"></label>-->
<input type = "text" name = "nombre" class = "dato" />
 

[Alexis88]

El resultado tiene que ser el mismo que en el ejemplo. Si no estás obteniendo el resultado, probablemente se esté mostrando un mensaje de error en la consola del navegador. Ayudaría mucho saber qué mensaje se muestra.

[pilucho]

Iniciado por Alexis88

El resultado tiene que ser el mismo que en el ejemplo. Si no estás obteniendo el resultado, probablemente se esté mostrando un mensaje de error en la consola del navegador. Ayudaría mucho saber qué mensaje se muestra.

Asi es amigo el ejemplo funciona pero, no logro hacerlo correr en un campo input
por ejemplo: "Fabiola Bartens Amaro" sus nombres en un input.. es decir en un cuadro de texto

[Alexis88]

Si se te complica trabajar con ese código, tengo otro que hice con JavaScript nativo. Puedes copiarlo desde aquí.

Básicamente necesitas añadir en el documento HTML el archivo con dicho código:

Código HTML:

<script type="text/javascript" src="autocomplete-5.0.js" />
 

En otro archivo, necesitas crear la instancia del objeto:

Código Javascript:

let inputBuscar = document.querySelector("#idInput"), //<input> en donde se escribirá
    autocomplete = new autocomplete(); //Instancia del objeto
 
autocomplete.load({
    words: "buscar.php", //Archivo en donde se realizará la búsqueda
    target: inputBuscar, //<input> en donde se escribirá y mostrarán los resultados
    value: "name" //Nombre del índice que contiene el dato a mostrarse
});
 

Y un archivo en el lado del servidor en donde se realizará la búsqueda en la base de datos:

Código PHP:

$dato = $_GET['term'];
$query = "SELECT fullName FROM employees WHERE name LIKE '%$dato%'";
$results = mysqli_query($connection, $query);
$respuesta = [];
 
if (mysqli_num_rows($results)){
    while ($rows = mysqli_fetch_assoc($results)){
        $respuesta[] = ['name' => $rows['fullName']];
    }
}
 
echo json_encode($respuesta);
 

En síntesis, se realiza una búsqueda en el archivo PHP a partir del dato escrito en la caja de texto, y todos los resultados se guardan en un arreglo que luego se devuelve como un objeto JSON, el cual, finalmente, será empleado por el objeto autocomplete para mostrar los datos debajo de la caja de texto en donde se escribió el dato a buscar.

No olvides que el de arriba es código de ejemplo. Es necesario que lo adaptes a lo que tienes para que funcione.

[Alexis88]

Iniciado por pilucho

[...] sus nombres en un input.. es decir en un cuadro de texto

Si necesitas mostrar el dato en otro campo de texto, haría falta cambiar el código anterior por este:

Código Javascript:

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

[pilucho]

Iniciado por Alexis88

Si se te complica trabajar con ese código, tengo otro que hice con JavaScript nativo. Puedes copiarlo desde aquí.

Básicamente necesitas añadir en el documento HTML el archivo con dicho código:

Código HTML:

<script type="text/javascript" src="autocomplete-5.0.js" />
 

En otro archivo, necesitas crear la instancia del objeto:

Código Javascript:

let inputBuscar = document.querySelector("#idInput"), //<input> en donde se escribirá
    autocomplete = new autocomplete(); //Instancia del objeto
 
autocomplete.load({
    words: "buscar.php", //Archivo en donde se realizará la búsqueda
    target: inputBuscar, //<input> en donde se escribirá y mostrarán los resultados
    value: "name" //Nombre del índice que contiene el dato a mostrarse
});
 

Y un archivo en el lado del servidor en donde se realizará la búsqueda en la base de datos:

Código PHP:

$dato = $_GET['term'];
$query = "SELECT fullName FROM employees WHERE name LIKE '%$dato%'";
$results = mysqli_query($connection, $query);
$respuesta = [];
 
if (mysqli_num_rows($results)){
    while ($rows = mysqli_fetch_assoc($results)){
        $respuesta[] = ['name' => $rows['fullName']];
    }
}
 
echo json_encode($respuesta);
 

En síntesis, se realiza una búsqueda en el archivo PHP a partir del dato escrito en la caja de texto, y todos los resultados se guardan en un arreglo que luego se devuelve como un objeto JSON, el cual, finalmente, será empleado por el objeto autocomplete para mostrar los datos debajo de la caja de texto en donde se escribió el dato a buscar.

No olvides que el de arriba es código de ejemplo. Es necesario que lo adaptes a lo que tienes para que funcione.

No me funciono

Código Javascript:

let inputBuscar = document.querySelector("#idInputA"), //<input> en donde se escribirá
    inputFinal = document.querySelector("#idInputB"), //<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
    }
});
 

Código HTML:

<!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">
    </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>
        <script type = "text/javascript" src = "autocomplete-5.0.js"></script>
    </body>
</html>
 

Código PHP:

<?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);
?>
 

[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.

[pilucho]

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:

<!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:

let 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:

<?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);
?>
 

[Alexis88]

No estás usando los id correctos porque tus campos de texto no tienen id sino name.

Estas dos líneas:

Código Javascript:

let inputBuscar = document.querySelector("#nombre"),
    inputFinal = document.querySelector("#nombre"),
 

Tienen que ser así:

Código Javascript:

let inputBuscar = document.querySelector("[name=buscar]"),
    inputFinal = document.querySelector("[name=nombre]"),
 

[pilucho]

Iniciado por Alexis88

No estás usando los id correctos porque tus campos de texto no tienen id sino name.

Estas dos líneas:

Código Javascript:

let inputBuscar = document.querySelector("#nombre"),
    inputFinal = document.querySelector("#nombre"),
 

Tienen que ser así:

Código Javascript:

let inputBuscar = document.querySelector("[name=buscar]"),
    inputFinal = document.querySelector("[name=nombre]"),
 

Lo cambie y nada y resto del index.html y buscar2.php esta como publique arriba y nada seguramente ya no funciona este script


script2.js

Código Javascript:

let inputBuscar = document.querySelector("[name=buscar]"), //<input> en donde se escribirá
    inputFinal = document.querySelector("[name=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
    }
});
 

[Alexis88]

¿Hiciste esto?

Iniciado por Alexis88

[...] 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). [...]

No olvides actualizar la página con CTRL + F5 luego de efectuar los cambios para que se limpie la caché del navegador y se ejecute el código actualizado. Si nuevamente sigue sin funcionar, por favor, muestra el mensaje que aparece en la consola del navegador.

[pilucho]

Iniciado por Alexis88

No estás usando los id correctos porque tus campos de texto no tienen id sino name.

Estas dos líneas:

Código Javascript:

let inputBuscar = document.querySelector("#nombre"),
    inputFinal = document.querySelector("#nombre"),
 

Tienen que ser así:

Código Javascript:

let inputBuscar = document.querySelector("[name=buscar]"),
    inputFinal = document.querySelector("[name=nombre]"),
 

Lo cambie y nada y resto del index.html y buscar2.php esta como publique arriba y nada seguramente ya no funciona este script


script2.js

Código Javascript:

let inputBuscar = document.querySelector("[name=buscar]"), //<input> en donde se escribirá
    inputFinal = document.querySelector("[name=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
    }
});
 

si amigo aqui te vuelvo a copiar lo que deje arriba

Código HTML:

<!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>
 

[pilucho]

creo que caduco el script y supongo que es solo para un nombre y no los demás nombres la idea era que se muestre los datos del Live Search en un campo de texto todo el contenido de la tabla item 1, item 2, item 3 etc pero en se script solo es para un nombre y no esta funcionando :(

[Alexis88]

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:

<!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:

let 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:

$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.

[Alexis88]

Iniciado por pilucho

creo que caduco el script y supongo que es solo para un nombre y no los demás nombres [...]

El script no puede caducar. No es un archivo de pago.

[pilucho]

Iniciado por Alexis88

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:

<!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:

let 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:

$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.

copie tal y como esta en el ejemplo. cambie los datos de conexión hasta incluí ""include_once 'consultas.php';"" por si faltara y nada no se ve nada
no visualiza en el campo de busqueda.


tabla de ejemplo:

Código SQL:

CREATE TABLE `buscar` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `nombre` VARCHAR(150) COLLATE utf8_unicode_ci NOT NULL,
  `apellido` VARCHAR(150) COLLATE utf8_unicode_ci NOT NULL,
  `email` VARCHAR(150) COLLATE utf8_unicode_ci NOT NULL,
  `foto` VARCHAR(255) COLLATE utf8_unicode_ci NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=6 ;
 
-- 
-- Volcar la base de datos para la tabla `buscar`
-- 
 
INSERT INTO `buscar` VALUES (1, 'Juan', 'Perez Fernandez', '[email protected]', 'juan.jpg');
INSERT INTO `buscar` VALUES (2, 'Maria', 'Rodriguez Zegarra', '[email protected]', 'maria.jpg');
INSERT INTO `buscar` VALUES (3, 'Estela', 'Ramirez Villanueva', '[email protected]', 'estela.jpg');
INSERT INTO `buscar` VALUES (4, 'Fabiola', 'Bartens Amaro', '[email protected]', 'fabiola.jpg');
INSERT INTO `buscar` VALUES (5, 'Gonzalo', 'Figueroa Suarez', '[email protected]', 'gonzalo.jpg');
 

[Alexis88]

Hay un error en el código de ejemplo.

Estas líneas:

Código Javascript:

autocomplete = new autocomplete();
 
autocomplete.load({
 

Cámbialas por estas:

Código Javascript:

auto = new autocomplete();
 
auto.load({
 

Como la palabra autocomplete estaba registrada para la función que genera el autocompletado, se producía un conflicto. Con ese cambio ya tendría que funcionar todo con normalidad. Si no es así, por favor, muestra lo que aparezca en la consola del navegador.

[pilucho]

Iniciado por Alexis88

Hay un error en el código de ejemplo.

Estas líneas:

Código Javascript:

autocomplete = new autocomplete();
 
autocomplete.load({
 

Cámbialas por estas:

Código Javascript:

auto = new autocomplete();
 
auto.load({
 

Como la palabra autocomplete estaba registrada para la función que genera el autocompletado, se producía un conflicto. Con ese cambio ya tendría que funcionar todo con normalidad. Si no es así, por favor, muestra lo que aparezca en la consola del navegador.

nada amigo, has probado el script ?

Código Javascript:

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

[pilucho]

no deja el foto enviar imagen de URL probare seperando el link

h t t p s : / / prnt .sc /112i0av

[Alexis88]

Iniciado por pilucho

nada amigo, has probado el script ?

Claro. Fue probándolo que noté el error que corregí en la respuesta anterior. He subido el ejemplo para que puedas probarlo en línea.

Trata de seguir los pasos indicados adaptando todo a lo que posees localmente. Si no funciona, muestra el mensaje de error en la consola del navegador para poder ayudarte.

[pilucho]

Iniciado por Alexis88

Claro. Fue probándolo que noté el error que corregí en la respuesta anterior. He subido el ejemplo para que puedas probarlo en línea.

Trata de seguir los pasos indicados adaptando todo a lo que posees localmente. Si no funciona, muestra el mensaje de error en la consola del navegador para poder ayudarte.

todo esta igual incluso el php igual, el primer codigo que pusiste como aporte lo descargue y funciona pero solo como <label class = "ref">Nombre</label> etc.. y no como input.


la conexión esta todo OK, solo que no funciona en ningún navegador

Código 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 nombre 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']];
    }
}
 
echo json_encode($respuesta);
 

[Alexis88]

¿Le colocaste los símbolos de apertura y cerrado del código PHP? Sé que es una pregunta más que básica, pero puede ser que eso se te esté pasando.

Tiene que ser así:

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 nombre 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']];
    }
}
 
echo json_encode($respuesta);
?>
 

Si todo está como se indica, tiene que funcionar exactamente como en el ejemplo en línea que te dejé como enlace en la respuesta anterior.

Por favor, no te olvides de mostrar el mensaje de error en la consola del navegador si sigue sin funcionarte.