Cara - Menu Pencarian
Pelajari cara membuat menu pencarian untuk memfilter tautan dengan JavaScript.
Cari/Filter Menu
Cara mencari link di menu navigasi:
Konten Halaman
Mulailah mengetik untuk kategori/tautan tertentu di dalam bilah pencarian untuk "memfilter" opsi pencarian.
Beberapa teks..Beberapa teks..Beberapa teks..Beberapa teks..Beberapa teks..Beberapa teks..Beberapa teks..Beberapa teks..
Beberapa teks lain..Beberapa teks..Beberapa teks..Beberapa teks..Beberapa teks..Beberapa teks..Beberapa teks..Beberapa teks..
Beberapa teks..
Buat Menu Pencarian
Langkah 1) Tambahkan HTML:
Contoh
<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>
Catatan: Kami menggunakan href="#" dalam demo ini karena kami tidak memiliki halaman untuk menautkannya. Dalam kehidupan nyata ini harus berupa URL nyata ke halaman tertentu.
Langkah 2) Tambahkan CSS:
Gaya kotak pencarian dan menu navigasi:
Contoh
/* 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;
}
Langkah 3) Tambahkan JavaScript:
Contoh
<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: Hapus toUpperCase() jika Anda ingin melakukan pencarian peka huruf besar/kecil.
Tip: Lihat juga Cara Memfilter Tabel .
Tip: Lihat juga Cara Memfilter Daftar .