0

Tengo un buscador mediante el cual, al tipear en el input, se despliega una lista de sugerencias. Necesitaría saber cómo puedo hacer para que cuando el usuario borre lo ingresado en el input y este quede VACIO, esa lista de sugerencias desaparezca y vuelva al estado inicial.

<input type="text" class="search-input" id="searchinput" placeholder="Busca gifs, hashtags, temas, busca lo que quieras…">
let input = document.getElementById("searchinput");

input.addEventListener('keypress', (e)=>{
        let menu = document.getElementById('busquedas-sugeridas');
        let valorInput = document.getElementById("searchinput").value;
        menu.style.display = 'block'; //muestra las sugerencias 
        if (e.keyCode == 13){
            verMasGifs(valorInput);
            guardarBusqueda();
            menu.style.display = 'none';
           }
})

1
  • Agrega tu HTML por favor
    – user128299
    Commented el 19 abr. 2020 a las 23:20

1 respuesta 1

0

Existe el evento input especialmente diseñado para esperar a que el input cambie de estado, te recomiendo mejor usar ese input en vez del eventListener tipo keypress ya que la diferencia entre keypress y keyup es que el primero se ejecuta mientras mantengas presionada la tecla pero no se ejecuta cuando la sueltas, keyup es lo contrario solo se ejecuta cuando la sueltas, el cuál es el comportamiento deseado, así que en teoria podrias lograr lo mismo ya sea con el event listener input o el event listener keyup.

Entonces aquí adentro:

input.addEventListener('input', (e)=>{

   /*
     Compruebas si input no tiene contenido y ademas le quitas
     los espacios al contenido que tuviese para comprobar de
     que no se esten agregando simplemente espacios vacios
     usando la función `trim()`
   */
   if(ev.currentTarget.value.trim() === ""){
      menu.style.display = 'none';
   }else{
      //Si llegas aquí entonces hay contenido.
      menu.style.display = 'block';
   }
})

es lo unico que habría que hacer para tanto esconder como para volver a mostrar la lista de sugerencias. Ahora bien, lo que debes hacer es adaptarlo a como tienes ahora el código.

1
  • Muchas gracias Riven! Funcionó perfecto.
    – Agostina
    Commented el 1 may. 2020 a las 20:17

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.