Jak na to – Nabídka vyhledávání
Přečtěte si, jak vytvořit vyhledávací nabídku pro filtrování odkazů pomocí JavaScriptu.
Nabídka Hledat/Filtr
Jak hledat odkazy v navigační nabídce:
Obsah stránky
Začněte psát pro konkrétní kategorii/odkaz do vyhledávacího pole, abyste „filtrovali“ možnosti vyhledávání.
Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..
Nějaký jiný text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..Nějaký text..
Nějaký text..
Vytvořte nabídku vyhledávání
Krok 1) Přidejte HTML:
Příklad
<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>
Poznámka: V této ukázce používáme href="#", protože nemáme stránku, na kterou bychom ji propojili. V reálném životě by to měla být skutečná adresa URL na konkrétní stránku.
Krok 2) Přidejte CSS:
Upravte styl vyhledávacího pole a navigační nabídky:
Příklad
/* 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) Přidejte JavaScript:
Příklad
<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: Odstraňte toUpperCase() , pokud chcete provádět vyhledávání s rozlišením malých a velkých písmen.
Tip: Podívejte se také na Jak filtrovat tabulky .
Tip: Podívejte se také na Jak filtrovat seznamy .