Hoe OM - Soekkieslys
Leer hoe om 'n soekkieslys te skep om skakels met JavaScript te filter.
Soek/Filter Kieslys
Hoe om skakels in 'n navigasiekieslys te soek:
Bladsy-inhoud
Begin om vir 'n spesifieke kategorie/skakel binne die soekbalk te tik om die soekopsies te "filtreer".
Sommige teks..Sommige teks..Sommige teks..Sommige teks..Sommige teks..Sommige teks..Sommige teks..Sommige teks..
Sommige ander teks..Sommige teks..Sommige teks..Sommige teks..Sommige teks..Sommige teks..Sommige teks..Sommige teks..
Sommige teks..
Skep 'n soekkieslys
Stap 1) Voeg HTML by:
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>
Let wel: Ons gebruik href="#" in hierdie demonstrasie aangesien ons nie 'n bladsy het om dit na te koppel nie. In die werklike lewe moet dit 'n regte URL na 'n spesifieke bladsy wees.
Stap 2) Voeg CSS by:
Stileer die soekkassie en die navigasiekieslys:
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) Voeg JavaScript by:
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>
Wenk: Verwyder toUpperCase() as jy 'n hoofletter-sensitiewe soektog wil uitvoer.
Wenk: Kyk ook na Hoe om tabelle te filtreer .
Wenk: Kyk ook na Hoe om lyste te filtreer .