Jak to zrobić - Menu wyszukiwania
Dowiedz się, jak utworzyć menu wyszukiwania, aby filtrować linki za pomocą JavaScript.
Menu wyszukiwania/filtrowania
Jak szukać linków w menu nawigacyjnym:
Zawartość strony
Zacznij pisać dla określonej kategorii/linku w pasku wyszukiwania, aby „przefiltrować” opcje wyszukiwania.
Jakiś tekst.Jakiś tekst.Jakiś tekst.Jakiś tekst.Jakiś tekst.Jakiś tekst.Jakiś tekst..Jakiś tekst.
Jakiś inny tekst.Jakiś tekst.Jakiś tekst.Jakiś tekst.Jakiś tekst.Jakiś tekst.Jakiś tekst...
Jakiś tekst..
Utwórz menu wyszukiwania
Krok 1) Dodaj kod HTML:
Przykład
<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>
Uwaga: używamy href="#" w tym demo, ponieważ nie mamy strony, do której można by to połączyć. W prawdziwym życiu powinien to być prawdziwy adres URL do określonej strony.
Krok 2) Dodaj CSS:
Styl pola wyszukiwania i menu nawigacyjnego:
Przykład
/* 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;
}
Krok 3) Dodaj JavaScript:
Przykład
<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>
Wskazówka: Usuń toUpperCase() , jeśli chcesz przeprowadzić wyszukiwanie z uwzględnieniem wielkości liter.
Wskazówka: sprawdź także Jak filtrować tabele .
Wskazówka: sprawdź także Jak filtrować listy .