Filter kategori dan search list dapat diterapkan pada data yang memiliki kategori dan banyak data, sehingga pada saat memilih data kita butuh sebuah pencarian maupun filter berdasarkan kategorinya. Seperti pada penerapan pencarian menu makanan dengan kategori makanan dan minuman, serta pencarian untuk memudahkan.
Lalu bagaimana cara menampilkan filter search list di website? Dengan berbekal pemahaman bahasa pemrograman HTML, CSS, dan javaScript kamu dapat membuat filter search list contact di website kamu.
Daripada hanya membayangkan saja bagaimana tampilan dari filter search list , yuk buka komputer kamu, dan langsung saja kita mulai membuat filter search list dengan HTML dan CSS, dan javaScript:
Buat file index.html
Buat tombol filter dengan nama tombol makan dan tombol minuman dan satu buah inputan seperti pada gambar dibawah berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<h3>Tutorial Filter dan Pencarian dengan Javascript</h3>
<button class="btn btn-primary" onclick="filter('makanan')">Makanan</button>
<button class="btn btn-warning" onclick="filter('minuman')">Minuman</button>
<hr>
<input type="text" id="value" onkeyup="search()" class="form-control col-md-6" placeholder="Type To Search">
</div>
<hr>
<div class="row">
<div class="col-md-4 mt-3">
<div class="card">
<div class="card-body">
<h5>Nasi Goreng Spesial</h5>
<p>Rp. 20.000</p>
<span>Makanan</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3">
<div class="card">
<div class="card-body">
<h5>Mie Goreng Spesial</h5>
<p>Rp. 22.000</p>
<span>Makanan</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3">
<div class="card">
<div class="card-body">
<h5>Jus Jeruk</h5>
<p>Rp.10.000</p>
<span>Minuman</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3">
<div class="card">
<div class="card-body">
<h5>Nasi Ayam Bakar</h5>
<p>Rp. 25.000</p>
<span>Makanan</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3">
<div class="card">
<div class="card-body">
<h5>Es Teh</h5>
<p>Rp. 5.000</p>
<span>Minuman</span>
</div>
</div>
</div>
</div>
</body>
</html>Selanjutnya tambahkan disetiap tag element <h5> sebuah class dengan nama menu sehingga menjadi <h5 class=”menu”> dan pada setiap div col tambahkan class item, kemudian tambahkan class kategori pada tag element <span> seperti syntax dibawah berikut ini
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<h3>Tutorial Filter dan Pencarian dengan Javascript</h3>
<button class="btn btn-primary" onclick="filter('makanan')">Makanan</button>
<button class="btn btn-warning" onclick="filter('minuman')">Minuman</button>
<hr>
<input type="text" id="value" onkeyup="search()" class="form-control col-md-6" placeholder="Type To Search">
</div>
<hr>
<div class="row">
<div class="col-md-4 mt-3 item">
<div class="card">
<div class="card-body">
<h5 class="menu">Nasi Goreng Spesial</h5>
<p>Rp. 20.000</p>
<span class="kategori">Makanan</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3 item">
<div class="card">
<div class="card-body">
<h5 class="menu">Mie Goreng Spesial</h5>
<p>Rp. 22.000</p>
<span class="kategori">Makanan</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3 item">
<div class="card">
<div class="card-body">
<h5 class="menu">Jus Jeruk</h5>
<p>Rp.10.000</p>
<span class="kategori">Minuman</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3 item">
<div class="card">
<div class="card-body">
<h5 class="menu">Nasi Ayam Bakar</h5>
<p>Rp. 25.000</p>
<span class="kategori">Makanan</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3 item">
<div class="card">
<div class="card-body">
<h5 class="menu">Es Teh</h5>
<p>Rp. 5.000</p>
<span class="kategori">Minuman</span>
</div>
</div>
</div>
</div>
</body>
</html>Buat Javascript
selanjutnya buat file javascript setelah tag element </html>
<script type="text/javascript">
//pencarian
function search() {
var value,menu,item,i;
value = document.getElementById("value").value.toUpperCase();
item = document.getElementsByClassName("item");
for(i=0;i<item.length;i++){
menu = item[i].getElementsByClassName("menu");
if (menu[0].innerHTML.toUpperCase().indexOf(value) > -1) {
item[i].style.display = "flex";
}else{
item[i].style.display = "none";
}
}
}
//filter kategori
function filter(nilai) {
var nilai,kategori,item;
value = nilai.toUpperCase();
item = document.getElementsByClassName("item");
for(i=0;i<item.length;i++){
kategori = item[i].getElementsByClassName("kategori");
if (kategori[0].innerHTML.toUpperCase().indexOf(value) > -1) {
item[i].style.display = "flex";
}else{
item[i].style.display = "none";
}
}
}
</script>
Hasil Keseluruhan
sehingga hasil coding secara keseluruhan menjadi sebagai berikut
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="container-fluid">
<h3>Tutorial Filter dan Pencarian dengan Javascript</h3>
<button class="btn btn-primary" onclick="filter('makanan')">Makanan</button>
<button class="btn btn-warning" onclick="filter('minuman')">Minuman</button>
<hr>
<input type="text" id="value" onkeyup="search()" class="form-control col-md-6" placeholder="Type To Search">
</div>
<hr>
<div class="row">
<div class="col-md-4 mt-3 item">
<div class="card">
<div class="card-body">
<h5 class="menu">Nasi Goreng Spesial</h5>
<p>Rp. 20.000</p>
<span class="kategori">Makanan</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3 item">
<div class="card">
<div class="card-body">
<h5 class="menu">Mie Goreng Spesial</h5>
<p>Rp. 22.000</p>
<span class="kategori">Makanan</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3 item">
<div class="card">
<div class="card-body">
<h5 class="menu">Jus Jeruk</h5>
<p>Rp.10.000</p>
<span class="kategori">Minuman</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3 item">
<div class="card">
<div class="card-body">
<h5 class="menu">Nasi Ayam Bakar</h5>
<p>Rp. 25.000</p>
<span class="kategori">Makanan</span>
</div>
</div>
</div>
<div class="col-md-4 mt-3 item">
<div class="card">
<div class="card-body">
<h5 class="menu">Es Teh</h5>
<p>Rp. 5.000</p>
<span class="kategori">Minuman</span>
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
//pencarian
function search() {
var value,menu,item,i;
value = document.getElementById("value").value.toUpperCase();
item = document.getElementsByClassName("item");
for(i=0;i<item.length;i++){
menu = item[i].getElementsByClassName("menu");
if (menu[0].innerHTML.toUpperCase().indexOf(value) > -1) {
item[i].style.display = "flex";
}else{
item[i].style.display = "none";
}
}
}
//filter kategori
function filter(nilai) {
var nilai,kategori,item;
value = nilai.toUpperCase();
item = document.getElementsByClassName("item");
for(i=0;i<item.length;i++){
kategori = item[i].getElementsByClassName("kategori");
if (kategori[0].innerHTML.toUpperCase().indexOf(value) > -1) {
item[i].style.display = "flex";
}else{
item[i].style.display = "none";
}
}
}
</script>
Hasil pada Browser (Output)
Setelah selesai, pastikan kalian sudah simpan file nya ya guys. kemudian jalankan pada browser seperti gambar berikut ya
