Cách tạo live search table với Jquery

Live search trong 1 bảng nào đó khá thuận tiện để bạn có thể dò ra giá trị bạn cần tìm, với kết quả search sẻ hiển thị tức thì nên rất hay và tiện dụng cho người search.

Thường thì trong website người ta sử dụn ctrl+f để tìm nhưng nếu trên trang web có một cái table quá nhiều giá trị và nhiều trang thì làm thế nào để search.

Tạo live search table với Jquery

Ví dụ mình sẻ tạo ra 1 table dạng như dưới đây, đơn giản là sử dụng bootstrap để tạo nhanh cái này.

Để làm được bảng này bạn cần thêm đoạn code sau

<input type="text" class="form-control pull-right" style="width:20%" id="search" placeholder="Type to search table..."> </div>
<table class="table-bordered table pull-right" id="mytable" cellspacing="0" style="width: 100%;"> <thead>
<tr role="row">
<th>Hostname</th>
<th>Free Filesize Limit</th>
<th>Free Daily Trafic</th>
<th>Premium Account</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dailyuploads.net</td>
<td>2 GB</td>
<td>20 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Depfile.com</td>
<td>1 GB</td>
<td>10 GB</td>
<td>100 GB</td>
</tr>
<tr>
<td>Uploaded.net</td>
<td>2 GB</td>
<td>1 GB</td>
<td>Unlimited</td>
</tr>
<tr>
<td>4shared.com</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td>2shared.com</td>
<td>2 GB</td>
<td>20 GB</td>
<td>100 GB</td>
</tr>
<tr>
<td>Fshare.vn</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td>Firedown.co</td>
<td>-</td>
<td>-</td>
<td>-</td>
</tr>
<tr>
<td>Share-online.biz</td>
<td>1 GB</td>
<td>2 GB</td>
<td>100 GB</td>
</tr>
<tr>
<td>Keep2share.cc</td>
<td>500 MB</td>
<td>2 GB</td>
<td>200 GB</td>
</tr>
</tbody>
</table>

Tiếp theo thêm vào đoạn code Jquery sau

<script> // Write on keyup event of keyword input element $(document).ready(function(){ $("#search").keyup(function(){ _this = this; // Show only matching TR, hide rest of them $.each($("#mytable tbody tr"), function() { if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) $(this).hide(); else $(this).show(); }); }); }); </script>

Nhớ thêm JS và bootstrap link sau vào phần head của website.

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Xem demo trực tiếp tại đây Chúc thành công!