jQuery - Bộ lọc
Bộ lọc jQuery
Sử dụng jQuery để lọc/tìm kiếm các phần tử cụ thể.
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 DOM 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 "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 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: