Cómo - Menú de búsqueda
Aprenda a crear un menú de búsqueda para filtrar enlaces con JavaScript.
Menú de búsqueda/filtro
Cómo buscar enlaces en un menú de navegación:
Contenido de página
Comience a escribir para una categoría/enlace específico dentro de la barra de búsqueda para "filtrar" las opciones de búsqueda.
Algo de texto..Algo de texto..Algo de texto..Algo de texto..Algo de texto..Algo de texto..Algo de texto..Algo de texto..
Algún otro texto... Algún texto... Algún texto... Algún texto... Algún texto... Algún texto... Algún texto... Algún texto...
Algún texto..
Crear un menú de búsqueda
Paso 1) Agregar HTML:
Ejemplo
<input type="text" id="mySearch" onkeyup="myFunction()" placeholder="Search.."
title="Type in a category">
<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: Usamos href="#" en esta demostración ya que no tenemos una página para enlazarla. En la vida real, debería ser una URL real a una página específica.
Paso 2) Agregar CSS:
Dale estilo al cuadro de búsqueda y al menú de navegación:
Ejemplo
/* Style the search box */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Style the navigation
menu */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Style the navigation links */
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
Paso 3) Agregar JavaScript:
Ejemplo
<script>
function myFunction() {
// Declare variables
var input, filter,
ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul =
document.getElementById("myMenu");
li =
ul.getElementsByTagName("li");
// Loop through all
list items, and hide those who don't match the search query
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>
Sugerencia: elimine toUpperCase() si desea realizar una búsqueda que distinga entre mayúsculas y minúsculas.
Sugerencia: Consulte también Cómo filtrar tablas .
Sugerencia: Consulte también Cómo filtrar listas .