Di bawah ini kita akan mempelajari cara membuat list filter atau filter search list dengan JavaScript. Filter ini sudah ada di phonebook pada sebuah handphone. Biasanya digunakan untuk mempermudah kita untuk mencari sesuatu dalam sebuah list. Jadi tidak hanya pada sebuah phonebook handphone saja, tetapi bisa digunakan untuk mencari pada list yang lain.
Filter Search List
Di bawah ini kita akan membuat filter search list pada sebuah phonebook. Kita akan funakan HTML, CSS dan Javascript untuk menajalankan fungsinya.
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } #myInput { background-image: url('https://dosenit.com/wp-content/uploads/2021/01/searchimage.png'); background-position: 10px 12px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 12px 20px 12px 40px; border: 1px solid #ddd; margin-bottom: 12px; } #myUL { list-style-type: none; padding: 0; margin: 0; } #myUL li a { border: 1px solid #ddd; margin-top: -1px; /* mencegah double border */ background-color: #f6f6f6; padding: 12px; text-decoration: none; font-size: 18px; color: black; display: block } #myUL li a:hover:not(.header) { background-color: #eee; } </style> </head> <body> <h2>Phonebook Saya</h2> <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Cari nama di sini" title="Type in a name"> <ul id="myUL"> <li><a href="#">Agus</a></li> <li><a href="#">Asep</a></li> <li><a href="#">Bagas</a></li> <li><a href="#">Bagus</a></li> <li><a href="#">Devano</a></li> <li><a href="#">Naura</a></li> <li><a href="#">Maria</a></li> </ul> <script> function myFunction() { var input, filter, ul, li, a, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); ul = document.getElementById("myUL"); li = ul.getElementsByTagName("li"); for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; txtValue = a.textContent || a.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { li[i].style.display = ""; } else { li[i].style.display = "none"; } } } </script> </body> </html>
Buat Filter Search List
Langkah 1) Tambahkan HTML:
Contoh
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Cari nama di sini" title="Type in a name"> <ul id="myUL"> <li><a href="#">Agus</a></li> <li><a href="#">Asep</a></li> <li><a href="#">Bagas</a></li> <li><a href="#">Bagus</a></li> <li><a href="#">Devano</a></li> <li><a href="#">Naura</a></li> <li><a href="#">Maria</a></li> </ul>
Catatan: Kita akan menggunakan href = “#” dalam demo ini karena tidak memiliki halaman untuk ditautkan. Dalam pembuatan web yang sebenernya, ini harus menjadi URL asli ke halaman tertentu.
Langkah 2) Tambahkan CSS:
Beri gaya pada elemen masukan dan daftar:
Contoh
#myInput {
background-image: url('https://dosenit.com/wp-content/uploads/2021/01/searchimage.png'); /* Tambahkan ikon search ke dalam field input */
background-position: 10px 12px; /* Posisi ikon search */
background-repeat: no-repeat; /* Jangan ulangi gambar ikon */
width: 100%; /* Lebar maksimum */
font-size: 16px; /* Tingkatkan ukuran font */
padding: 12px 20px 12px 40px; /* Tambahkan padding */
border: 1px solid #ddd; /* Tambahkan warna abu pada border */
margin-bottom: 12px; /* Tambahkan space di bawah field input */
}
#myUL {
/* Hapus style list default */
list-style-type: none;
padding: 0;
margin: 0;
}
#myUL li a {
border: 1px solid #ddd; /* Tambahkan border ke semua link */
margin-top: -1px; /* penvegahan double border */
background-color: #f6f6f6; /* Warna abu-abu pada background */
padding: 12px; /* Tambahkan padding */
text-decoration: none; /* Hapus inline teks default */
font-size: 18px; /* tingkatkan font-size */
color: black; /* Tambahkan warna teks hitam */
display: block; /* Jadikan itu menjadi elemen blok untuk mengisi seluruh list*/
}
#myUL li a:hover:not(.header) {
background-color: #eee; /* Tambahkan efek hover ke semua link, kecuali header*/
}Langkah 3) Tambahkan JavaScript:
Contoh
<script>
function myFunction() {
// dekalarasi variable
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');
// Ulangi semua item daftar, dan sembunyikan mereka yang tidak cocok dengan kueri pencarian
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</scriptTip: Hapus toUpperCase() jika ingin melakukan pencarian case-sensitive.
