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à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 thức DOM để chuyển văn bản thành chữ thường, điều này làm cho chữ hoa và chữ thường trong tìm kiếm không phân biệt (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.