Teman-teman pasti sudah tau apa itu fungsi search di dalam website, dan teman-teman pasti juga sering menemui form search ketika membuka sebuah website, karena fungsi search ini berguna sekali untuk pengunjung untuk melihat-lihat langsung tertuju apa yang ingin pengunjung itu lihat, jadi tanpa perlu harus scroll kebawah. dan untuk cara membuat fungsi ini saya akan mencoba membuatnya dengan sebuah javascript, kenapa harus javascript, nanti kita akan bahas, simak terus ya teman-teman.
Kenapa harus javascript, karena disini saya akan langsung mengetikan dan yang saya inginkan itu ketika saya ketikan karakter pertama dia akan mencari, tentunya cara ini kita pakai untuk sebuah list yang sudah tampil ya, seperti halnya untuk kasus ini saya gunakan untuk mencari kategori, jadi dimana website ini mempunyai sebuah kategori yang banyak, dan saya tinggal ketikan saja, misal baju, kata bajupun itu akan tampil, paling atas, seperti itu.
Oke sudah kebayang ya, untuk kasusnya sekarang kita langsung lihat saja templatenya seperti apa, disini saya silahkan teman-teman buat file index.html, dan silahkan ketikan kode seperti ini:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="container">
<h1>Cara Membuat Pencarian Menggunaan Javascript</h1>
<div class="left">
<h2>Daftar Kategori</h2>
<input type="text" name="" id="cariKat" onkeyup="prosesMenu()" placeholder="Cari Disini...">
<ul id="daftarKategori">
<li><a href="#">Kaos</a></li>
<li><a href="#">Kemeja</a></li>
<li><a href="#">Blazer</a></li>
<li><a href="#">Celana Jeans</a></li>
<li><a href="#">Celana Sekolah</a></li>
<li><a href="#">Celana Gemes</a></li>
<li><a href="#">Rok Span</a></li>
<li><a href="#">Kaos Kutang</a></li>
<li><a href="#">Daster</a></li>
<li><a href="#">Batik</a></li>
<li><a href="#">Baju Renang</a></li>
</ul>
</div>
<div class="right">
<h2>Selemat Datang di toko Sejahtera</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et velit esse pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
di atas adalah templatenya ya, dan sekarang kita lihat kode javascriptnya:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function prosesMenu()
{
var input = document.getElementById("cariKat");
var filter = input.value.toLowerCase();
var ul = document.getElementById("daftarKategori");
var li = document.querySelectorAll("li")
console.log(li)
for(var i = 0; i<li.length; i++){
var ahref = document.querySelectorAll("a")[i];
if(ahref.innerHTML.toLowerCase().indexOf(filter) > -1){
li[i].style.display = "";
}else{
li[i].style.display = "none";
}
}
}
Oke sekarang kita lihat, di input form pencarian saya masukan event onkeyup dimana itu berisi sebuah proses untuk mencarinya ya teman-teman. dan di kode javasriptnya saya buat supaya walaupun yang di cari dan user mencari huruf kecil semua ya, dan ada sebuah if, dimana yang karakternya terdapat pada menu kategori dia akan tampil kurang lebihnya seperti itu. dan jika tidak maka di hidden. oke bagaimana hasilnya seperti ini:
sebelah kiri adalah tampilannya dan ketika kita search ada di sebelah kanan, dan saya mencoba untuk mencari kata rok dan munculnya rok span, seperti itu ya, untuk design silahkan teman-teman berkreasi sendiri, dan saya rasa cukup sampai disini belajar kita tentang cara membuat Fungsi Search dengan Javascript, semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.