5

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

16
  • No hace lo que esperas por que en ningún lado tu código evalúa eventos como keyup o keydown en el input
    – user128299
    Commented el 3 nov. 2020 a las 16:06
  • @BetaM, espero que en el imput me muestre los nombres de los usuarios mientras voy escribiendo. Pero bueno, no se mucho javascript, perdon! Commented el 3 nov. 2020 a las 16:16
  • @Triby, no quiero usar una libreria, queria hacerlo solo con vanilla javascript. Commented el 3 nov. 2020 a las 16:18
  • 1
    @Triby, no se de donde saque suggest, soy una trucha, jajajajaja Commented el 3 nov. 2020 a las 16:28
  • 2
    PAra la proxima vez, no estas buscando una respuesta canonica.. simplemente estas buscando una respuesta porque tu pregunta no tuvo la suficiente atencion...
    – gbianchi
    Commented el 6 nov. 2020 a las 4:16

3 respuestas 3

9
+25

¿Cómo hacer un campo de texto input autocompletable?

Técnica básica con HTML puro

La forma más sencilla de hacer un campo de texto input autocompletable es utilizar la etiqueta "datalist" con HTML. No necesita javascript, y es preferible porque el navegador se ha de encargar de completar y buscar entre las opciones. Ejemplo:

<label for="selección">Elige una opción de transporte:</label>
<input list="lista" name="claveDelParámetro" id="selección">

<datalist id="lista">
  <option value="valorDelParámetro1">avión</option>
  <option value="valorDelParámetro2">barco</option>
  <option value="valorDelParámetro3">carro</option>
  <option value="valorDelParámetro4">disco volador</option>
  <option value="valorDelParámetro4">elefante</option>
  <option value="valorDelParámetro5">caballo</option>
</datalist> 

Si el usuario escribe "c" o "cab", inmediatamente verá la opción del caballo. Si lo selecciona, en los parámetros GET o POST se enviará claveDelParámetro = valorDelParámetro5.

En general, si tienes una solución HTML pura, CSS pura, o SVG pura, es preferible utilizarla a usar javascript, porque te garantiza la mayor compatibilidad, el mejor rendimiento, y sigues los estándares generales en lugar de estar reinventando cosas que ya están establecidas, lo cual en el futuro hace que tu código sea más simple y fácil de mantener, y esto último es extremadamente importante. Entre los principios más importantes de la programación está este:

Trata de hacer todo de la manera más simple posible, el mejor código es el que no hay que escribir ni mantener.

Lo más fácil siempre sería que cargares la página desde el principio con la lista "datalist" ya renderizada y completa, no obstante, si la lista fuere demasiado grande, por tener quizás millones de opciones, entonces quizás se justificaría el hacer el complicado proceso de actualizarla dinámicamente. Ten en cuenta que incluso si escribes 1000 opciones en tu "datalist" al compilar tu HTML, no estás realmente saturando el código, porque sigue siendo muy poco texto; en verdad tendrían que ser varios miles de opciones para que fueren un problema.

Si tal fuere el caso, lo que tienes que hacer para solucionar el problema es simplemente un evento javascript que agregue elementos a la "datalist" con nueva información relacionada con lo que el usuario esté escribiendo.

Actualización dinámica de la datalist con JavaScript y API

Para actualizar dinámicamente con los datos nuevos obtenidos de un API, según vaya escribiendo el usuario, tienes que usar un código como el que tengo aquí. Lo he escrito para ejemplificar cómo se podría lograr esto. He creado una clase llamada "DynamicDatalist" para que se facilite todo, ya que lo que parece algo muy difícil es en realidad muy simple si se concibe a la datalist como un objeto que se puede actualizar con una función propia. Si no conoces la programación orientada a objetos, te recomiendo que te familiarices con ella, te hará todo muchísimo más fácil, tanto en PHP como en JavaScript. En PHP está mucho más definida y tiene muchísimos detalles (interfaces, tipificación de variables, clases abstractas, etcétera), en JavaScript es muy general aún pero de todas formas ayuda a hacer todo más fácil que con meras funciones aisladas.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript">
class DynamicDatalist{
    //función constructora (que se ejecuta automáticamente al crear el objeto): construir la datalist con Id
    constructor(datalistId) {
        this.objectDOM = document.getElementById(datalistId)
        //check that the datalist exists, and if not create it
        if(this.objectDOM !== null){
            this.objectDOM = document.getElementById(datalistId)
        } else {//construir un nuevo elemento DOM si no existe aún
            this.objectDOM = document.createElement('datalist')
            this.objectDOM.id = datalistId
        }
    }
    //función agregar una opción a la datalist
    agregar(valor, texto = null) {
        if(texto === null) texto = valor
        //ver si está el valor ya definido
        var list = this.opciones()
        if(!list.hasOwnProperty(valor)) {
            // si no está definido el valor, definirlo
            //crear el objeto opción
            var option = document.createElement('option')
            option.value = valor
            option.innerHTML = texto
            //adjuntar
            this.objectDOM.appendChild(option)
        }
    }
    //leer la lista de opciones
    opciones() {
        var output = {}
        //iterar a través de las opcione
        for(let option of this.objectDOM.childNodes) {
            if(option.tagName == 'OPTION') output[option.value] = option.innerHTML
        }
        return output;
    }

    actualizarAPI(pista) {
      //tienes que codificarlo para que pasaren lo caracteres extraños que hubiere
      pista = encodeURI(pista)
      //la api GET en este ejemplo
      var api = 'https://ejemplo.com/buscar.php?datos=transportes&pista=' + pista
      //Ahora sí puedes llamar a la api
      //usa el parámetro {credentials: 'include'} para que se manden las cookies también
      
        fetch(call, {credentials: 'include'})
      //luego descodifica el JSON. Nota el punto antes de "then", eso significa que esto es una función que se ejecutará subsecuentemente. El parámetro es una función anónima, solo que en un formato abreviado, en realidad lo que ahí dice es esto:
      // .then(function (response) {return response.json();})
    .then(response => response.json())
      //luego actualiza la lista de datos.
      .then(datos => {
            //Agrega la nueva información, suponiendo que te llegó como un objeto (lo que llegaría desde un array asociativo de PHP), que en javascript sería: var objeto = {clave1: 'valor1', clave2: 'valor2'};
            //entonces has un pequeño bucle para agregar cada opción a la lista
            //esto que lees aquí es el equivalente a un foreach($arrayAsociativo as $clave => $valor) en php
            //para "clave" como cada key en el objeto "datos"
            for (let clave in datos)
            {
                //si el objeto "datos" tiene la propiedad "clave" entonces...
                //Esto se tiene que hacer porque los objetos javascript tienen unas claves prototipo que están presentes siempre(y permiten que ejecutes ciertas funciones), pero que no son lo que necesitas ahora, así que solo quieres que sea una propiedad, no parte de los prototipos.
                if(datos.hasOwnProperty(clave))
                {
                    //obten el valor
                    var valor = datos[clave]
                    //agrega la opción a la lista de datos
                    this.agregar(clave, valor)
                }
            }
        })
    }
}
    </script>
</head>
<body>
<label for="selección">Elige una opción de transporte:</label>
<input list="lista" name="claveDelParámetro" id="selección" oninput="listaDD.actualizarAPI(this.value)">
<datalist id="lista">
  <option value="valorDelParámetro1">avión</option>
  <option value="valorDelParámetro2">barco</option>
  <option value="valorDelParámetro3">carro</option>
</datalist>
<script type="text/javascript">
    var listaDD = new DynamicDatalist('lista')
</script>
</body>
</html>

He preparado una versión simulada, para que veas cómo funciona. Nota que el HTML original solo tiene las opciones avión, barco, carro; pero que al ejecutar esto se manda la petición y se actualiza la datalist.

<script type="text/javascript">
class DynamicDatalist{
    //construir la datalist con Id
    constructor(datalistId) {
        this.objectDOM = document.getElementById(datalistId)
        //check that the datalist exists, and if not create it
        if(this.objectDOM !== null){
            this.objectDOM = document.getElementById(datalistId)
        } else {//construir un nuevo elemento DOM si no existe aún
            this.objectDOM = document.createElement('datalist')
            this.objectDOM.id = datalistId
        }
    }
    //agregar una opción a la datalist
    agregar(valor, texto = null) {
        if(texto === null) texto = valor
        //ver si está el valor ya definido
        var list = this.opciones()
        if(!list.hasOwnProperty(valor)) {
            // si no está definido el valor, definirlo
            //crear el objeto opción
            var option = document.createElement('option')
            option.value = valor
            option.innerHTML = texto
            //adjuntar
            this.objectDOM.appendChild(option)
        }
    }
    //leer la lista de opciones
    opciones() {
        var output = {}
        //iterar a través de las opcione
        for(let option of this.objectDOM.childNodes) {
            if(option.tagName == 'OPTION') output[option.value] = option.innerHTML
        }
        return output;
    }

    actualizarAPI(pista) {
      //tienes que codificarlo para que pasaren lo caracteres extraños que hubiere
      pista = encodeURI(pista)
      //la api GET en este ejemplo
      var api = 'https://ejemplo.com/buscar.php?datos=transportes&pista=' + pista
      //Ahora sí puedes llamar a la api
      //usa el parámetro {credentials: 'include'} para que se manden las cookies también
      //desetiqueta esto:
    //  fetch(call, {credentials: 'include'})

        //vamos a simular el fetch:
        //borra esto:
        const simulador = new Promise((resolve) => {
        var respuesta = {claveSimulada: 'valorSimulado'}
        respuesta['opciónDescargada4'] = 'disco volador'
        respuesta['opciónDescargada5'] = 'elefante'
        respuesta['opciónDescargada6'] = 'caballo'
        resolve(respuesta)
    })

      //luego descodifica el JSON. Nota el punto antes de "then", eso significa que esto es una función que se ejecutará subsecuentemente. El parámetro es una función anónima, solo que en un formato abreviado, en realidad lo que ahí dice es esto:
      // .then(function (response) {return response.json();})
      //desetiqueta esto:
    //  .then(response => response.json())
      //luego actualiza la lista de datos.
      .then(datos => {
            //Agrega la nueva información, suponiendo que te llegó como un objeto (lo que llegaría desde un array asociativo de PHP), que en javascript sería: var objeto = {clave1: 'valor1', clave2: 'valor2'};
            //entonces has un pequeño bucle para agregar cada opción a la lista
            //esto que lees aquí es el equivalente a un foreach($arrayAsociativo as $clave => $valor) en php
            //para "clave" como cada key en el objeto "datos"
            for (let clave in datos)
            {
                //si el objeto "datos" tiene la propiedad "clave" entonces...
                //Esto se tiene que hacer porque los objetos javascript tienen unas claves prototipo que están presentes siempre(y permiten que ejecutes ciertas funciones), pero que no son lo que necesitas ahora, así que solo quieres que sea una propiedad, no parte de los prototipos.
                if(datos.hasOwnProperty(clave))
                {
                    //obten el valor
                    var valor = datos[clave]
                    //agrega la opción a la lista de datos
                    this.agregar(clave, valor)
                }
            }
        })
    }
}
    </script>

<label for="selección">Elige una opción de transporte:</label>
<input list="lista" name="claveDelParámetro" id="selección" oninput="listaDD.actualizarAPI(this.value)">
<datalist id="lista">
  <option value="valorDelParámetro1">avión</option>
  <option value="valorDelParámetro2">barco</option>
  <option value="valorDelParámetro3">carro</option>
</datalist>
<script type="text/javascript">
    var listaDD = new DynamicDatalist('lista')
</script>

5

Debes tener en cuenta la optimización de la consulta, buscar con la primera letra te retornara demasiados datos, que generan tiempos de espera largos.

No es necesario $listaLote porque lo puedes hacer por javascript, dado que estas buscando por nya: nombre y apellido puede restringir la solicitud de búsqueda solo cuando se digiten más de 2 3 palabras. ( eso optimizará tu auto-completador )

No es buena practica usar el nya como identificador del cliente, debes pasar a tu respuesta de busqueda el id asi.

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

Agregar selección por etiquetas.

Para que al seleccionar se vean varias opciones como etiquetas, puedes encerrar tus elementos seleccionados y el input de búsqueda en una misma caja.

var clients_list = []

// 1. Creo busqueda cada vez que cambia el input
function handleAutocompleClients(text = '', listItem = clients_list, idContainer = "clients_select"){
   // 2. Valido si es necesario buscar en la base de datos
   if(listItem.length == 0 && text.length > 2){
      // 3. Busco en Base de Datos
      // 4. Guardo la busqueda en local
      fetchBuscar().then(addAutcompleteItems(text,listItem))
   } else {
    if(listItem.length > 0 && text.length != 0 ){
      // 5. Muestro el Resultado 
      renderAutocompleteItem(listItem,'id','name', text)  
    } else {
      renderAutocompleteItem([],'id','name', text)
    }
   }
}

function addAutcompleteItems(text, list){
   return fetchBuscar().then((data)=>{
    return JSON.parse(data)
   }).then((data) => {
    addNotRepeatToList(data, list)
   })
}

function addNotRepeatToList(data, list){
   let ids = list.map((i) => { return i.id })
   list.push( 
     ...data.filter((item) => { 
       return ids.indexOf(item.id) === -1
     }))
}

function renderAutocompleteItem(list, key, value, text = ' '){
  let container = document.getElementById('autocomplete_select')
  container.innerHTML = ''
  sortListForFoundText(list,text,value)
    .map((item) => {
    container.appendChild(createAutocompleteItem(item,text,key,value))
  })
}

function sortListForFoundText(list,text,value){
  return list.sort((a,b) => {
    return b[value].split(text).length - a[value].split(text).length
 })
}

function createAutocompleteItem(item, text, key, value){
    let element = document.createElement('span')
    element.class = "autocomplete_item"
    let content = item[value].split(text)
      .join('<strong>'+text+'</strong>')
    element.innerHTML = content
    element.id = item[key]
    return element
}


//...
//....
// aqui simulo la peticion a buscar.php
function fetchBuscar(){
  return new Promise((resolve,rejected)=>{ setTimeout(function(){
      let data = '[{"id":1,"name":"htmlstring"},{"id":2,"name":"mailchimp"}]';
    resolve(data); // ¡Todo salió bien!
  }, 120);
})
}
.autocomplete {
  position: relative;
}

.autocomplete_input {
  border: 1px solid #b2b2b2;
  padding: 5px;
  border-radius: 5px;
  display: flex;
  margin: 0;
}

.autocomplete_tag {
  font-size: .9rem;
  border: 1px solid #b2b2b2;
  border-radius: 5px;
  padding: 2px 5px;
  margin-right: 5px;
}

.autocomplete_field {
  position: relative;
}

.autocomplete_field input {
  border: none;
}

.autocomplete_select {
    position: relative;
    display: flex;
    flex-direction: column;
    left: 5px;
    padding: 5px 15px;
    border: 1px solid #b2b2b2;
}

.autocomplete_item {
    display: block;
}

.autocomplete_item:hover {
    background-color: #f5f5f5;
}
<div class="autocomplete">
<ul class="autocomplete_input">
<span id="0" class="autocomplete_tag" onclick="this.remove()">Client Name</span>
<span class="autocomplete_field">
<input name="client" onkeyup="handleAutocompleClients(this.value)" placeholder="add or create clients">
</span>
</ul>
<div id="autocomplete_select" class="autocomplete_select">
</div>
</div>

2

Ok mira, desconozco aún mucho sobre la POO de PHP, que es lo que estás trabajando.

Pero con anterioridad ya hice un programa que hace búsquedas en tiempo real con Ajax.

El ejemplo es bastante sencillo tengo el input tal cual, cuando comienzo a escribir sobre el pues salen opciones y si hago clic sobre un item, el input toma el nombre del item.

 <input autocomplete="off" type="text" class="control form-control" placeholder="Buscar..." name="busqueda" id="busqueda" autofocus>
 <div id="tabla_resultado"></div>

y pues, para que haga sus funciones al escribir es lo siguiente:

$(document).ready(function () {
$("#busqueda").blur(function () {
    $("#tabla_resultado").fadeOut(100);
});
$("#busqueda").keyup(function () {
    var valorBusqueda = $(this).val();
    var v = $(this).val().length;
    if (v > 0) {
        obtener_registros(valorBusqueda);
    } else {
        $("#tabla_resultado").fadeOut(100);
    }
});
function obtener_registros(alumnos) {
    var prod = $('#busqueda').val();
    $.ajax({
        url: './php/ajax.php',
        data: prod,
        type: 'POST',
        dataType: 'json',
        encode: true
    }).done(function (resultado) {
        $("#tabla_resultado").html(resultado).fadeIn();
   //Esta sección es la que hace que se seleccione el item
        $('#tabla_resultado li').click(function () {
            $('#busqueda').val($(this).text());
            $('#tabla_resultado').fadeOut(100);
        });

    })
}
})

#tabla_resultado, es un div completamente vacío donde se mostrará mi lista de datos. a la lista que se muestra, puedo hacerle clic y el item es el que aparecerá en el campo input.

Ojo, que mi codigo dice #tabla_resultado li xq yo estoy devolviendo elementos < li > desde mi archivo php desde el cual estoy recibiendo los datos.

por si no me estoy explicando, cuando hago el llamado de Ajax, se utiliza un archivo PHP que tiene la consulta de MySql (En mi caso). y para los resultados semejantes se mostraran en elementos < li >

 include('conect.php');
 $html = '';

 if ((isset($_POST['busqueda']))) {
 $a = $_POST['busqueda'];
 $b = strtoupper($_POST['busqueda']);
 $query = "SELECT * FROM lista_prods WHERE existencia>0 AND
 reg LIKE '%" . $a . "%' OR 
 descripcion LIKE '%" . $b . "%' OR 
 nombre LIKE '%" . $b . "%'  LIMIT 5";
 $da = mysqli_query($con, $query);
 $filas = mysqli_fetch_assoc($da);
 if ($filas > 0) {
    do {
        $html .= "<li class=\"list-group-item list-selected\">";
        $html .= $filas['id'];
        $html .= "-";
        $html .= $filas['nombre'];
        $html .= "-";
        $html .= $filas['categoria'];
        $html .= "-";
        $html .= $filas['descripcion'];
        $html .= "- $";
        $html .= $filas['venta'];
        $html .= "- Código de registro: ";
        $html .= $filas['reg'];
        $html .= "</li>";
    } while ($filas = mysqli_fetch_assoc($da));
    //
} else {
    $html .= '<li  class="list-group-item">';
    $html .= 'No encontrado quizás se ha agotado';
    $html .= "</li>";
}
echo json_encode($html);
}

Eso es lo que hace mi archivo PHP, como se observa devuelve los elementos ya mencionados.

Cuando escribo sobre el cuadro aparecen las opciones, en este caso solo una

Y al hacer clic sobre la opción los datos se colocan sobre el input

No es lo mismo que tienes tu, pero espero que te pueda ser de utilidad.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.