tutorial javascript

Live searching box dan highlight dengan Jquery

Live searching box dan highlight dengan Jquery (https://jquery.com/) cukup banyak di gunakan belakangan ini. Dan kebetulan baru-baru ini admin diminta klien untuk dibuatkan suatu searching box tetapi yang cara kerjanya live (real time), jadi user tidak mau repot dan lama menunggu loading selagi data dari database di query untuk di tampilkan hasil pencariannya. Sebetulnya code ini belum dicoba lebih jauh, dan refrensinya pun dari google, belum di tes juga kalau jumlah data yang di cari besar (big data), tapi sudah di rasa cukup untuk memenuhi permintaan klien admin yang tadi. Baiklah berikut ini full code Live searching box dan highlight dengan Jquery, bisa langsung di copy paste saja:

<input type="text" id="search" placeholder="Search...">

<table id="table" border="1">

     <thead>

            <tr>

                <th>Nama</th> 

                <th>Alamat</th> 

            </tr>

     </thead>

     <tbody>   

      <tr>

       <td>Anisa</td>

       <td>Jakarta</td>       

      </tr> 

      <tr>

       <td>Anton</td>

       <td>Jakarta</td>

      </tr>

      <tr>

       <td>Budi</td>

       <td>Bandung</td>

      </tr>

      <tr>

       <td>Basuki</td>

       <td>Jakarta</td>

      </tr>

      <tr>

       <td>Cika</td>

       <td>Solo</td>

      </tr>

      <tr>

       <td>Cyntia</td>

       <td>Palembang</td>

      </tr>

      <tr>

       <td>Desy</td>

       <td>Solo</td>

      </tr>

      <tr>

       <td>Donald</td>

       <td>Jakarta</td>

      </tr>

     </tbody>

</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script type="text/javascript">

var $rows = $('#table >tbody >tr:visible');

$('#search').keyup(function() {

    // fungsi untuk search

    var val = '^(?=.*\\b' + $.trim($(this).val()).split(/\s+/).join('\\b)(?=.*\\b') + ').*$',

        reg = RegExp(val, 'i'),

        text;

    $rows.show().filter(function() {

        text = $(this).text().replace(/\s+/g, ' ');

        return !reg.test(text);

    }).hide();


    var value = $(this).val().toLowerCase();    

    // fungsi untuk highlight

    $("#table >tbody >tr >td").each(function(index, elem) {

        var $elem = $(elem);

        if (value.length > 0 && $elem.text().toLowerCase().indexOf(value) != -1) {

            $elem.css('backgroundColor', 'yellow');             

        }

        else {

            $elem.css('backgroundColor', '');             

        }

    });

});

</script>

Dan berikut ini demonstrasi nya :

Nama Alamat
Anisa Jakarta
Anton Jakarta
Budi Bandung
Basuki Jakarta
Cika Solo
Cyntia Palembang
Desy Solo
Donald Jakarta


Jadi saat user mengetikan kata pencarian pada search box, maka jquery akan mem-filter table dan menampilkan data yang cocok saja. Hal ini tentu akan membuat tampilan lebih menarik dan user friendly. Terima kasih.

Leave a Reply

Your email address will not be published. Required fields are marked *