Ví dụ chúng ta có một bảng dữ liệu và một khung tìm kiếm như bên dưới. Khi người dùng gõ từ cần tìm kiếm thì bảng dữ liệu sẽ tìm hiển thị những kết quả tìm được. Các bạn có thể thử gõ vào khung tìm kiếm bên dưới để xem kết quả trực quan hơn nhé.
Name | Start date | Salary |
---|---|---|
Tiger Nixon | 2011/04/25 | $320,800 |
Garrett Winters | 2011/07/25 | $170,750 |
Ashton Cox | 2009/01/12 | $86,000 |
Cedric Kelly | 2012/03/29 | $433,060 |
Airi Satou | 2008/11/28 | $162,700 |
Brielle Williamson | 2012/12/02 | $372,000 |
Herrod Chandler | 2012/08/06 | $137,500 |
Rhona Davidson | 2010/10/14 | $327,900 |
Colleen Hurst | 2009/09/15 | $205,500 |
Sonya Frost | 2008/12/13 | $103,600 |
Jena Gaines | 2008/12/19 | $90,560 |
Quinn Flynn | 2013/03/03 | $342,000 |
Charde Marshall | 2008/10/16 | $470,600 |
Haley Kennedy | 2012/12/18 | $313,500 |
Tatyana Fitzpatrick | 2010/03/17 | $385,750 |
Michael Silva | 2012/11/27 | $198,500 |
Paul Byrd | 2010/06/09 | $725,000 |
Gloria Little | 2009/04/10 | $237,500 |
Bradley Greer | 2012/10/13 | $132,000 |
Dai Rios | 2012/09/26 | $217,500 |
Jenette Caldwell | 2011/09/03 | $345,000 |
Yuri Berry | 2009/06/25 | $675,000 |
Caesar Vance | 2011/12/12 | $106,450 |
Doris Wilder | 2010/09/20 | $85,600 |
Angelica Ramos | 2009/10/09 | $1,200,000 |
Gavin Joyce | 2010/12/22 | $92,575 |
Jennifer Chang | 2010/11/14 | $357,650 |
Brenden Wagner | 2011/06/07 | $206,850 |
Fiona Green | 2010/03/11 | $850,000 |
Shou Itou | 2011/08/14 | $163,000 |
Michelle House | 2011/06/02 | $95,400 |
Suki Burks | 2009/10/22 | $114,500 |
Prescott Bartlett | 2011/05/07 | $145,000 |
Gavin Cortez | 2008/10/26 | $235,500 |
Martena Mccray | 2011/03/09 | $324,050 |
Unity Butler | 2009/12/09 | $85,675 |
Howard Hatfield | 2008/12/16 | $164,500 |
Hope Fuentes | 2010/02/12 | $109,850 |
Vivian Harrell | 2009/02/14 | $452,500 |
Timothy Mooney | 2008/12/11 | $136,200 |
Jackson Bradshaw | 2008/09/26 | $645,750 |
Olivia Liang | 2011/02/03 | $234,500 |
Bruno Nash | 2011/05/03 | $163,500 |
Sakura Yamamoto | 2009/08/19 | $139,575 |
Thor Walton | 2013/08/11 | $98,540 |
Finn Camacho | 2009/07/07 | $87,500 |
Serge Baldwin | 2012/04/09 | $138,575 |
Zenaida Frank | 2010/01/04 | $125,250 |
Zorita Serrano | 2012/06/01 | $115,000 |
Jennifer Acosta | 2013/02/01 | $75,650 |
Cara Stevens | 2011/12/06 | $145,600 |
Hermione Butler | 2011/03/21 | $356,250 |
Lael Greer | 2009/02/27 | $103,500 |
Jonas Alexander | 2010/07/14 | $86,500 |
Shad Decker | 2008/11/13 | $183,000 |
Michael Bruce | 2011/06/27 | $183,000 |
Donna Snider | 2011/01/25 | $112,000 |
Thiết kế khung tìm kiếm và bảng dữ liệu
Trước tiên các bạn cần có một bảng dữ liệu. Bảng dữ liệu được gán một ID, sẽ dễ dàng cho việc viết code javascript. Ví dụ tôi có một khung tìm kiếm và một bảng dữ liệu như sau:
<input type="text" id="myInput" onkeyup="myFilter()" placeholder="Search..." autocomplete="off"> <div class="table-responsive"> <table class="display" id="example" style="width: 100%;"> <thead> <tr class="header"> <th>Name</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger Nixon</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>Airi Satou</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>Brielle Williamson</td> <td>2012/12/02</td> <td>$372,000</td> </tr> ... </tbody> </table> </div>
Để định dạng khung tìm kiếm có icon và bảng dữ liệu thanh trượt dọc như đầu bài viết. Ta sử dụng đoạn code CSS sau:
<style> .table-responsive { max-height: 600px; height: auto; overflow: hidden; overflow-y: scroll; } #myInput { background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5RcbS5fQ5vMqt07yIjZYsec0qo9SJX2tqjZDLmnOdsBrsHPrINOY-n2rW71OAnbvVTIYuX2MM8KC5wGY4nJqrPkSOKpqK8-yKsAMIeKsZT2ysp_3N1gNeACP3RcWs_k8OxxiBzl4lbr2Z/s16000/search_icon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 7px 10px 7px 40px; border: 1px solid #ddd; margin-bottom: 12px; border-radius: 20px; } #example thead tr.header, #example tr:hover { background-color: #f1f1f1; } </style><style> .table-responsive { max-height: 600px; height: auto; overflow: hidden; overflow-y: scroll; } #myInput { background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5RcbS5fQ5vMqt07yIjZYsec0qo9SJX2tqjZDLmnOdsBrsHPrINOY-n2rW71OAnbvVTIYuX2MM8KC5wGY4nJqrPkSOKpqK8-yKsAMIeKsZT2ysp_3N1gNeACP3RcWs_k8OxxiBzl4lbr2Z/s16000/search_icon.png'); background-position: 10px 10px; background-repeat: no-repeat; width: 100%; font-size: 16px; padding: 7px 10px 7px 40px; border: 1px solid #ddd; margin-bottom: 12px; border-radius: 20px; } #example thead tr.header, #example tr:hover { background-color: #f1f1f1; } </style>
Tạo hàm lọc dữ liệu bằng JavaScript
Để hiểu và xây dựng được hàm tìm kiếm cho bảng dữ liệu thì các bạn xem qua nguyên lý của quá trình tìm kiếm như sau:
Khi người dùng vừa gõ xong một ký tự, sự kiện keyup của Input sẽ được thực thi thông qua hàm myFilter(). Trong hàm myFilter(), sẽ chạy vòng lặp từ dòng đầu đến dòng cuối cùng của bảng. Trên mỗi dòng, sẽ dò tìm ký tự của bạn đã gõ. Nếu kết quả trả về là không có, thì dòng đó sẽ được ẩn đi bằng cách đặt thuộc tính display="none", ngược lại thì đặt dispplay="".
Chi tiết cú pháp của hàm myFilter() như sau:
<script> function myFilter() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("example"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { td = tr[i].getElementsByTagName("td")[0]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; } else { tr[i].style.display = "none"; } } } } </script>