2

Tengo un input que me sirve como una barra de búsqueda:

<input id="inputbnombre" name="inputbnombre" type="text" onKeyUp="barra_busqueda(this)">

Y la función barra_busqueda(elem) es esta:

$("#divload").load("buscar.php", {"nombre": $(elem).val(), "tipo": "agregar"}, function(response) {
            if(response!="nada"){
                var obj = jQuery.parseJSON(response);
                if(obj.length>1){
                    $("#selectprod").attr("size",obj.length);
                }else{
                    $("#selectprod").attr("size","2");
                }
                $("#selectprod").html('');
                for(var i=0;i<obj.length;i++){
                    $("#selectprod").append('<option class="text-center" value="'+obj[i].cod+'">'+obj[i].nombre+'</option>');
                }
            }else{
                $("#selectprod").attr("size","2");
                $("#selectprod").html('<option class="text-center" value="-1">NO HAY COINCIDENCIAS</option>');
            }
});
$("#selectprod").css({"display": "inline"});

El resultado lo muestro en un select para poder captar el evento Onchange, y el archivo buscar.php lo que hace es buscar una coincidencia en la base de datos con: Select * from productos where nombre like '%$_REQUEST[nombre]%'. La pregunta es, ya que es un evento OnkeyUp, y la velocidad a la que se escribe una letra aveces hace que el servidor o la función me mande error, cómo puedo hacer que se espere un segundo, osea que recién se ejecute la función cuando lleva 1 segundo sin escribir nada en el input, no creo que sleep() de php o SetTimeOut de Javascript me puedan ayudar en este caso.

4
  • 2
    Revisa esta respuesta, donde se incluye un temporizador para evitar que se acumulen peticiones. Además, es mejor si usas el evento input para que funcione tanto al teclear como cortar y pegar texto.
    – Triby
    el 29 dic. 2021 a las 16:41
  • Podrías guardar temporalmente los resultados de las búsquedas para que tarde menos la próxima vez. También podrías limitar las peticiones un tiempo.
    – Mateo
    el 29 dic. 2021 a las 17:06
  • ¿Y cual es el error que el servidor o la función te manda? ¿Que dice?
    – masterguru
    el 29 dic. 2021 a las 17:07
  • También puedes utilizar una técnica llamada debounce
    – Arriel
    el 29 dic. 2021 a las 17:15

1 respuesta 1

0

Podrías hacer algo así, dejo ejemplo funcional:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <label for="input">Try it:
        <input id="input" type="text" placeholder="Type something here..."/>
    </label>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

JavaScript (archivo a parte en misma carpeta que el html, se llama app.js)

let timer = 0;
const delayValue = 500 //Aquí seteamos el tiempo de espera en milisegundos
$("#input").keyup(function () {
  clearTimeout(timer);
  timer = setTimeout(() => {
    //Hacemos algo
    console.log("Se terminó el tiempo, texto ingresado: " + $("#input").val());
  }, delayValue);
});

Lo que hace es cada vez que se detecta un keyup borra el timer que está corriendo de 0 a 500, entonces si si esperan esos 500ms se ejecuta el código (en este caso un console.log), si no se llega a cumplir antes de que exista otro keyup, se borra el timer devuelta al haber otro keyup y arranca la cuenta de 0 y así consecutivamente, hasta que se deje de presionar teclas por 500ms o el tiempo seteado en delayValue ya que lo toma de ahí.

Espero te sirva, quedo a las ordenes.


Dejo JavaScript con JS Vanilla y jQuery más prolijos, con un destructuring de dos niveles y backticks en el clg.

//V1 con jQuery
let timer = 0;
const delayValue = 700; //Aquí seteamos el tiempo de espera en milisegundos
$("#searchedValue").keyup(function ({ target: { value } }) {
  clearTimeout(timer);
  timer = setTimeout(() => {
    //Hacemos algo
    console.log(`Se terminó el tiempo, texto ingresado: ${value}`);
  }, delayValue);
});

// V2 con JS Vanilla
let timer = 0;
const delayValue = 700; //Aquí seteamos el tiempo de espera en milisegundos
const searchedValue = document.getElementById("searchedValue");

searchedValue.addEventListener("keyup", ({ target: { value } }) => {
  clearTimeout(timer);
  timer = setTimeout(() => {
    //Hacemos algo
    console.log(`Se terminó el tiempo, texto ingresado: ${value}`);
  }, delayValue);
});

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.