Skip to main content
4 de 6
se añadieron 273 caracteres en el cuerpo

Autocompletar input con JavaScrtip PHP y SQL

[ACTUALIZADO]

Bueno, logre que funcione bien, pero no se como hacer para que autocomplete el input, hasta ahora lo puse en una lista, pero; ¿Como puedo hacer seleccionarlo y que lo tome el input?

El objetivo es lograr algo asi:

introducir la descripción de la imagen aquí


introducir la descripción de la imagen aquí


Base de datos Cliente

id | nya
-----------
1  | mario perez
2  | romina lpez
3  | juan perez
4  | mariano sanchez

bloque.clases.php

class Admin extends Dbh {
    public function getAutocompletar(){
        $sql = "SELECT * FROM cliente";
        $stmt = $this->connect()->prepare($sql);
        $stmt->execute();
        $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
        return $data;
    }

    public function getBuscar($name){
        $sql = "SELECT nya FROM cliente WHERE nya LIKE :name";
        $stmt = $this->connect()->prepare($sql);
        $stmt->execute(['name' => '%' . $name . '%']);
        $data = $stmt->fetchAll(PDO::FETCH_ASSOC);
        return $data;
    }
}

buscar.js

function search(name) {
    console.log(name);
    fetchSearchData(name);
}

function fetchSearchData(name){
    fetch('../admin/buscar.php', {
        method: 'POST',
        body: new URLSearchParams('nya=' + name)
    })
    .then(res => res.json())
    .then(res => viewSearchResoult(res))
    .catch(e => console.error('Error: ' + e))
}

function viewSearchResoult(data){
    const dataViewer = document.getElementById('dataViewer');

    dataViewer.innerHTML = '';

    for(let i = 0; i < data.length; i++){
        const li = document.createElement('li');
        li.innerHTML = data[i]['nya'];
        dataViewer.appendChild(li);
    }
}

buscar.php

<?php
include_once('../../mode/dbh.class.php');
include_once('../../mode/block.clases.php');

$nombre = $_POST['nya'];

$con = new Admin();
$data = $con->getBuscar($nombre);

echo json_encode($data);

?>

factuda.php

<?php
include_once('../modelo/bloque.clases.php');

$listaLote = new Admin();
$datos = $listaLote->getAutocompletar();
?>
<form action="" method="POST">
    <input type="text" class="form-control" name="nombre" id="nombre" oninput=search(this.value)>

    <ul id="dataViewer">
      <?php foreach($datos as $c){ ?>
      <li><?=$c['nya'];?></li>
      <?php } ?>
    </ul>
</form>

Les agradezco la ayuda!