menu-bar

Thursday, May 4, 2017

Live searching box dan highlight dengan Jquery

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 codenya, 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>

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.

No comments:

Post a Comment