Barra de Búsqueda por Lista Javascript [SOLUCIONADO]

En Javascript, uno de los elementos más esenciales que adicionamos a nuestras aplicaciones es la “Barra de búsqueda”. Este componente ayuda a los usuarios a encontrar elementos o datos más rápidamente y con más eficiencia dentro de una lista o un conjunto de datos. En este articulo, nuestro foco será desarrollar una barra de búsqueda por lista, una variante muy práctica y funcional de este componente.

Javascript, a lo largo de los años, ha demostrado tener la flexibilidad y capacidad para adaptarse a diferentes situaciones. Y, esto se aplica a la integración de una barra de búsqueda en función de una lista – codificada en puro Javascript, sin la necesidad de librerías adicionales. Sigamos los pasos para lograr esto:

Creando la Estructura Base en HTML

Primero, creamos la estructura HTML que consistirá en un campo de entrada input para nuestro buscador y una lista ul para desplegar nuestros datos para búsqueda:

        <input id="myInput" type="text" placeholder="Buscar.."></input>
        <ul id="myUL">
          <li>Audi</li>
          <li>BMW</li>
          ...
        </ul>
      

Adicionando la Funcionalidad en Javascript

Ahora, debemos codificar la funcionalidad de búsqueda en Javascript. Para esto, nos valeremos del evento ‘keyup’ asociado a nuestro campo de entrada. En cuanto el usuario comienza a teclear, este evento se dispara y activa nuestra función de búsqueda:

 
      var input, filter, ul, li, a, i, txtValue;
      input = document.getElementById('myInput');
      input.addEventListener('keyup', function(){
         filter = input.value.toUpperCase();
         ul = document.getElementById("myUL");
         li = ul.getElementsByTagName('li');
        ...
      })
    

Dentro de nuestra función, obtenemos el texto ingresado por el usuario y lo convertimos a mayúsculas. Luego, obtenemos la lista de elementos y los recorremos uno a uno. Para cada elemento, si su texto coincide con el texto del usuario, se muestra; de lo contrario, no:

      for (i = 0; i < li.length; i++) {
         a = li[i];
         txtValue = a.textContent || a.innerText;
         if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
         } else {
            li[i].style.display = "none";
         }
      }
    

Refinando la Funcionalidad

Aunque la funcionalidad básica de nuestra barra de búsqueda por lista en Javascript ya está lista, podemos mejorarla. Por ejemplo, podríamos considerar casos en los que el usuario ingrese espacios en blanco antes o después del texto de búsqueda. Para esto, podríamos utilizar la función trim():

    input.addEventListener('keyup', function(){
     filter = input.value.trim().toUpperCase();
     ...
    });
    

Conclusiones

El proceso de crear una barra de búsqueda por lista en Javascript implica varios factores que hemos detallado en este artículo. Sin embargo, la principal ventaja es la capacidad de proporcionar a tus usuarios una forma efectiva y rápida de buscar a través de grandes cantidades de datos, proporcionando una mejor experiencia de usuario.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad