How TO - Suchmenü
Erfahren Sie, wie Sie ein Suchmenü erstellen, um Links mit JavaScript zu filtern.
Such-/Filtermenü
So suchen Sie in einem Navigationsmenü nach Links:
Seiteninhalt
Beginnen Sie mit der Eingabe einer bestimmten Kategorie/eines bestimmten Links in der Suchleiste, um die Suchoptionen zu „filtern“.
Etwas Text.. Etwas Text.. Etwas Text.. Etwas Text.. Etwas Text.. Etwas Text.. Etwas Text.. Etwas Text..
Etwas anderer Text.. Etwas Text.. Etwas Text.. Etwas Text.. Etwas Text.. Etwas Text.. Etwas Text.. Etwas Text..
Etwas Text..
Erstellen Sie ein Suchmenü
Schritt 1) HTML hinzufügen:
Beispiel
<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>
Hinweis: Wir verwenden href="#" in dieser Demo, da wir keine Seite haben, auf die wir verlinken können. Im wirklichen Leben sollte dies eine echte URL zu einer bestimmten Seite sein.
Schritt 2) CSS hinzufügen:
Gestalten Sie das Suchfeld und das Navigationsmenü:
Beispiel
/* 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;
}
Schritt 3) JavaScript hinzufügen:
Beispiel
<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>
Tipp: Entfernen Sie toUpperCase() , wenn Sie eine Suche mit Berücksichtigung der Groß-/Kleinschreibung durchführen möchten.
Tipp: Lesen Sie auch So filtern Sie Tabellen .
Tipp: Lesen Sie auch So filtern Sie Listen .