Come fare per - Menu di ricerca
Scopri come creare un menu di ricerca per filtrare i collegamenti con JavaScript.
Menu Ricerca/Filtro
Come cercare i collegamenti in un menu di navigazione:
Contenuto della pagina
Inizia a digitare una categoria/collegamento specifico all'interno della barra di ricerca per "filtrare" le opzioni di ricerca.
Del testo..del testo..del testo..del testo..del testo..del testo..del testo..del testo..
Qualche altro testo...Alcuni testi...Alcuni testi...Alcuni testi...Alcuni testi...Alcuni testi...Alcuni testi...Alcuni testi...
Un po' di testo..
Crea un menu di ricerca
Passaggio 1) Aggiungi HTML:
Esempio
<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: in questa demo utilizziamo href="#" poiché non abbiamo una pagina a cui collegarlo. Nella vita reale questo dovrebbe essere un vero URL a una pagina specifica.
Passaggio 2) Aggiungi CSS:
Stile la casella di ricerca e il menu di navigazione:
Esempio
/* 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;
}
Passaggio 3) Aggiungi JavaScript:
Esempio
<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>
Suggerimento: rimuovere toUpperCase() se si desidera eseguire una ricerca con distinzione tra maiuscole e minuscole.
Suggerimento: dai un'occhiata anche a Come filtrare le tabelle .
Suggerimento: dai un'occhiata anche a Come filtrare gli elenchi .