Pelajari cara membuat menu pencarian untuk memfilter link dengan menggunakan JavaScript.
Section Artikel
Search/Filter Menu
Cara mencari link pada menu navigasi.
Contoh:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial, Helvetica, sans-serif; } * { box-sizing: border-box; } /* Buat kolom layout dengan Flexbox */ .row { display: flex; } /* Kolom kiri (menu) */ .left { flex: 35%; padding: 15px 0; } .left h2 { padding-left: 8px; } /* Kolom kanan (Halaman content) */ .right { flex: 65%; padding: 15px; } /* Style search box */ #mySearch { width: 100%; font-size: 18px; padding: 11px; border: 1px solid #ddd; } /* Style navigation menu didalam kolom kiri */ #myMenu { list-style-type: none; padding: 0; margin: 0; } #myMenu li a { padding: 12px; text-decoration: none; color: black; display: block } #myMenu li a:hover { background-color: #eee; } </style> </head> <body> <h2>Search Menu</h2> <p>Mulailah mengetik kategori tertentu di dalam bar pencarian untuk "memfilter" opsi pencarian.</p> <div class="row"> <div class="left" style="background-color:#bbb;"> <h2>Menu</h2> <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> </div> <div class="right" style="background-color:#ddd;"> <h2>Halaman Content</h2> <p>Mulailah mengetik kategori tertentu di dalam bar pencarian untuk "memfilter" opsi pencarian.</p> <p>Ini teks..Ini teks..Ini teks..Ini teks..Ini teks..Ini teks..Ini teks..Ini teks ..</p> <p>Ini teks lain..Ini teks lain..Ini teks lain..Ini teks lain..Ini teks lain..Ini teks lain..Ini teks lain..Ini teks lain ..</p> <p>Ini teks..</p> </div> </div> <script> function myFunction() { var input, filter, ul, li, a, i; input = document.getElementById("mySearch"); filter = input.value.toUpperCase(); ul = document.getElementById("myMenu"); li = ul.getElementsByTagName("li"); 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> </body> </html>
Membuat Search Menu
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 ditautkan. Dalam penggunaan nyata, ini harus berupa URL asli yang menuju halaman tertentu.
Langkah 2) Tambahkan CSS
Atur Style search box dan menu navigasi.
Contoh:
/* Atur Style search box */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* Atur Style navigation menu */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
/* Atur Style navigation link */
#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() {
// Deklarasikan variabel
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");
// Ulangi semua list item, dan sembunyikan semua list yang tidak cocok dengan kueri pencarian
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>