Membuat Live Search Data dengan jQuery
Membuat Live Search Data dengan jQuery - Live Search merupakan suatu pencarian yang akan menampilkan data ketika user mengetikan keyword pada kolom pencarian, live search biasanya digunakan pada table yang memiliki banyak sekali list atau data untuk memudahkan user menemukan data dengan hanya melakukan searching pada kolom pencarian. Nah, pada tutorial kali ini saya akan mencoba mempraktekan bagaimana Membuat Live Search Data dengan jQuery. Langsung saja simak langkah - langkahnya berikut ini.
Langkah 1: Membuat Live Search Data dengan jQuery
Untuk membuat live search, langkah pertama kita akan buat struktur awal terlebih dahulu dengan sintak HTML dan membuat list sebagai bahan data untuk dijadikan bahan pencarian, tentu list data bisa kalian isikan sesuai dengan kebutuhan.
<input type="text" class="boxSearch" placeholder="Search..." />
<ul class="listSearch">
<li>Web Master</li>
<li>Web Design</li>
<li>Web Programming</li>
<li>Graphic Design</li>
<li>Digital Marketing</li>
<li>Flash Animation</li>
</ul>
</body>
Langkah 2: Membuat Live Search Data dengan jQuery
Langkah selanjutnya adalah mendesain tampilan form pencarian dan list data yang telah dibuat diatas dengan sintak CSS agar terlihat lebih rapih dan menarik.
body {
font-family: 'Ubuntu', sans-serif;
font-size: 16px;
}
.boxSearch {
width: 100%;
display: block;
padding: 10px;
border: 1px solid #0988A9;
}
ul.listSearch {
padding-left: 0 !important;
}
.listSearch li{
background-color: #0988A9;
padding: 10px;
margin: 5px 0;
list-style: none;
color: #DAD9DE;
}
.listSearch li:hover {
background-color: #DAD9DE;
color: #0988A9;
}
Langkah 3: Membuat Live Search Data dengan jQuery
Agar fungsi pencarian berjalan dengan baik, tentu kita akan tambahkan sintak jQuery berikut, dan sintak jQuery ini adalah sintak utama dalam menjalankan fungsi live search pada form pencarian.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function($){
$('.listSearch li').each(function(){
$(this).attr('searchData', $(this).text().toLowerCase());
});
$('.boxSearch').on('keyup', function(){
var dataList = $(this).val().toLowerCase();
$('.listSearch li').each(function(){
if ($(this).filter('[searchData *= ' + dataList + ']').length > 0 || dataList.length < 1) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
</script>
Setelah semua sintak diketikan, selanjutnya simpan filenya kemudian buka pada browser masing - masing dan lihat hasilnya, maka ketika kita mengetikan huruf pada form pencarian maka akan secara otomatis mencari dan menampilkan data sesuai dengan huruf yang diketikan.
Bagaimana, menarik bukan ? dengan menambahkan fungsi live search kita akan lebih mudah dalam menemukan data, baik cukup sekian tutorial mengenai bagaimana Membuat Live Search Data dengan jQuery, semoga bermanfaat dan selamat mencoba :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
