Como fazer - Menu de pesquisa
Saiba como criar um menu de pesquisa para filtrar links com JavaScript.
Menu Pesquisar/Filtrar
Como pesquisar links em um menu de navegação:
Conteúdo da página
Comece a digitar uma categoria/link específico dentro da barra de pesquisa para "filtrar" as opções de pesquisa.
Algum texto .. Algum texto .. Algum texto .. Algum texto .. Algum texto .. Algum texto .. Algum texto .. Algum texto ..
Algum outro texto .. algum texto .. algum texto .. algum texto .. algum texto .. algum texto .. algum texto .. algum texto ..
Algum texto..
Criar um menu de pesquisa
Etapa 1) Adicionar HTML:
Exemplo
<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="#" nesta demonstração, pois não temos uma página para vinculá-la. Na vida real, isso deve ser um URL real para uma página específica.
Etapa 2) Adicionar CSS:
Estilize a caixa de pesquisa e o menu de navegação:
Exemplo
/* 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;
}
Etapa 3) Adicione JavaScript:
Exemplo
<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>
Dica: Remova toUpperCase() se desejar realizar uma pesquisa com distinção entre maiúsculas e minúsculas.
Dica: confira também Como filtrar tabelas .
Dica: confira também Como filtrar listas .