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.

<body>
    <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.

@import url('https://fonts.googleapis.com/css?family=Ubuntu');
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.

Membuat Live Search Data dengan jQuery

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 :)

25 Maret 2018

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat