¿Cómo crear: menú de búsqueda

Aprende a usar JavaScript para crear un menú de búsqueda que filtre enlaces.

Buscar/Filtrar menú

¿Cómo buscar enlaces en el menú de navegación?

Menú
Contenido de la Página

Escribe una categoría/enlace específica en la barra de búsqueda para "filtrar" las opciones de búsqueda.

Alguno de texto...Alguno de texto...Alguno de texto...Alguno de texto...Alguno de texto...Alguno de texto...Alguno de texto...Alguno de texto...

Alguno de otro texto...Alguno de texto...Alguno de texto...Alguno de texto...Alguno de texto...Alguno de texto...Alguno de texto...Alguno de texto...

Alguno de texto...

Pruebe usted mismo

Crear el menú de búsqueda

Paso 1 - Añadir HTML:

<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Buscar.." title="Escribe una categoría">
<ul id="myMenu">
  <li><a href="#">HTML</a></li>
  <li><a href="#">CSS</a></li>
  <li><a href="#">JavaScript</a></li>
  <li><a href="#">PHP</a></li>
  <li><a href="#">Python</a></li>
  <li><a href="#">jQuery</a></li>
  <li><a href="#">SQL</a></li>
  <li><a href="#">Bootstrap</a></li>
  <li><a href="#">Node.js</a></li>
</ul>

Nota:En esta demostración, utilizamos href="#"debido a que no tenemos páginas enlazables. En la práctica, debería ser una URL real que apunte a una página específica.

Segundo - Añadir CSS:

Establecer los estilos del cuadro de búsqueda y del menú de navegación:

/* Estilos del cuadro de búsqueda */
#mySearch {
  width: 100%;
  font-size: 18px;
  padding: 11px;
  border: 1px solid #ddd;
}
/* Estilos del menú de navegación */
#myMenu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/* Estilos de los enlaces de navegación */
#myMenu li a {
  padding: 12px;
  text-decoration: none;
  color: black;
  display: block
}
#myMenu li a:hover {
  background-color: #eee;
}

Tercero - Añadir JavaScript:

<script>
function myFunction() {
  // Declaración de variables
  var input, filter, ul, li, a, i;
  input = document.getElementById("mySearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myMenu");
  li = ul.getElementsByTagName("li");
  // Recorrer todos los elementos de la lista y ocultar aquellos que no coinciden con la consulta de búsqueda
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>

Pruebe usted mismo

Consejo:Si desea realizar una búsqueda sensible a mayúsculas y minúsculas, elimine toUpperCase().

Páginas relacionadas

Tutoriales:Cómo filtrar tablas

Tutoriales:¿Cómo filtrar la lista