Hoe - Zoekmenu
Leer hoe u een zoekmenu maakt om links te filteren met JavaScript.
Menu zoeken/filteren
Zo zoekt u naar links in een navigatiemenu:
Pagina inhoud
Begin met typen voor een specifieke categorie/link in de zoekbalk om de zoekopties te "filteren".
Wat tekst.. Wat tekst.. Wat tekst.. Wat tekst.. Wat tekst.. Wat tekst.. Wat tekst.. Wat tekst..
Wat andere tekst.. Wat tekst.. Wat tekst.. Wat tekst.. Wat tekst.. Wat tekst.. Wat tekst.. Wat tekst..
wat tekst..
Maak een zoekmenu
Stap 1) HTML toevoegen:
Voorbeeld
<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>
Opmerking: we gebruiken href="#" in deze demo omdat we geen pagina hebben om naar te linken. In het echte leven zou dit een echte URL naar een specifieke pagina moeten zijn.
Stap 2) CSS toevoegen:
Stijl het zoekvak en het navigatiemenu:
Voorbeeld
/* 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;
}
Stap 3) JavaScript toevoegen:
Voorbeeld
<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>
Tip: Verwijder toUpperCase() als u hoofdlettergevoelig wilt zoeken.
Tip: bekijk ook Hoe tabellen te filteren .
Tip: bekijk ook Hoe u lijsten kunt filteren .