Bootstrap không có thành phần cho phép lọc. Tuy nhiên, chúng ta có thể sử dụng jQuery để lọc / tìm kiếm các phần tử. Dưới đây là cách dùng bộ lọc nâng cao trong Bootstrap 3
Lọc bảng
Thực hiện tìm kiếm không phân biệt chữ hoa chữ thường cho các mục trong bảng sau:
Code:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>FilterTable</h2> <p>Nhập một cái gì đó vào trường nhập liệu để tìm kiếm tên, họ hoặc email trong bảng:</p> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <br> <table class="table table-bordered table-striped"> <thead> <tr> <th>Tên</th> <th>Họ</th> <th>Email</th> </tr> </thead> <tbody id="myTable"> <tr> <td>Tiệp</td> <td>Hoàng</td> <td>ht@ht.vn</td> </tr> <tr> <td>Hòa</td> <td>NGuyễn</td> <td>nguyenhoa@gmail.com</td> </tr> <tr> <td>Tân</td> <td>Đặng</td> <td>tancute@gmail.com</td> </tr> <tr> <td>Thanh</td> <td>Hoàng</td> <td>hoangthanh@gmail.com</td> </tr> </tbody> </table> </div> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myTable tr").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html>
Kết quả :
Giải thích ví dụ:
jQuery được sử dụng để lặp qua từng hàng của bảng để kiểm tra xem có bất kỳ giá trị văn bản nào khớp với giá trị của trường đầu vào hay không.
- Phương thức toggle () ẩn hàng (display: none) không khớp với giá trị tìm kiếm.
- Pương thức toLowerCase () để chuyển đổi văn bản thành chữ thường, điều này làm cho tìm kiếm không phân biệt chữ hoa chữ thường (cho phép "tiệp", "Tiệp" và thậm chí "TIỆP" trên tìm kiếm).
Lọc danh sách
Thực hiện tìm kiếm không phân biệt chữ hoa chữ thường cho các mục trong danh sách:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Lọc danh sách</h2> <p>Nhậpvào để tìm kiếm danh sách cho các mục cụ thể:</p> <input class="form-control" id="myInput" type="text" placeholder="Search.."> <br> <ul class="list-group" id="myList"> <li class="list-group-item">Danh sách 1</li> <li class="list-group-item">Danh sách 2</li> <li class="list-group-item">Danh sách 3</li> <li class="list-group-item">Danh sách 4</li> </ul> </div> <script> $(document).ready(function(){ $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myList li").filter(function() { $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) }); }); }); </script> </body> </html>
Kết quả:
