Bộ lọc Bootstrap 4 (Nâng cao)
Bộ lọc Bootstrap 4
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àn 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:
Thí 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>
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ó 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 toggle
thức ẩn hàng ( display:none
) không khớp với tìm kiếm. Chúng tôi sử dụng toLowerCase()
phương pháp để 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 "john", "John" và thậm chí "JOHN" 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:
Thí dụ
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Lọc mọi thứ
Thực hiện tìm kiếm không phân biệt chữ hoa chữ thường đối với văn bản bên trong phần tử div:
Thí dụ
I am a paragraph.
Another paragraph.