Bộ lọc Bootstrap (Nâng cao)
Bộ lọc khởi động
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ử.
Bảng lọc
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:
Ví dụ
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | [email protected] |
| Mary | Moe | [email protected] |
| July | Dooley | [email protected] |
| Anja | Ravendale | [email protected] |
jQuery
<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> Hãy tự mình thử » Ví dụ được giải thích: Chúng tôi sử dụng jQuery để lặp qua từng hàng trong bảng để kiểm tra xem có 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 tìm kiếm. Chúng tôi sử dụng phương thức toLowerCase() để chuyển đổi văn bản thành chữ thường, điều này làm cho trường hợp tìm kiếm không phân biệt chữ hoa chữ thường (cho phép "john", "John" và thậm chí cả "JOHN" khi tìm kiếm).
Danh sách lọc
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:
Ví dụ
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Lọc thả xuố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 menu thả xuống:
Ví dụ
Open the dropdown menu and type something in the input field to search for dropdown items:
Lọc mọi thứ
Thực hiện tìm kiếm văn bản không phân biệt chữ hoa chữ thường bên trong phần tử div:
