jQuery - Filters
jQuery Filters
Use jQuery to filter/search for specific elements.
Filter Tables
Perform a case-insensitive search for items in a table:
Example
Type something in the input field to search the table for first names, last names or emails:
| Firstname | Lastname | |
|---|---|---|
| John | Doe | john@example.com |
| Mary | Moe | mary@mail.com |
| July | Dooley | july@greatstuff.com |
| Anja | Ravendale | a_r@test.com |
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>
Try it Yourself »
Example explained: We use jQuery to loop through each table rows to check if there are any text values that matches the value of the input field. The toggle() method hides the row (display:none) that does not match the search. We use the toLowerCase() DOM method to convert the text to lower case, which makes the search case insensitive (allows "john", "John", and even "JOHN" on search).
Filter Lists
Perform a case-insensitive search for items in a list:
Example
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Filter Anything
Perform a case-insensitive search for text inside a div element:
截取页面反馈部分，让我们更快修复内容！也可以直接跳过填写反馈内容!