jQuery Tutorials
jQuery Introduction
jQuery Get Started
jQuery Syntax
jQuery Selectors
jQuery Events
jQuery Effects
jQuery Hide/Show
jQuery Fade
jQuery Slide
jQuery Animate
jQuery stop()
jQuery Callback
jQuery Chaining
jQuery HTML
jQuery Get
jQuery Set
jQuery Add
jQuery Remove
jQuery CSS Classes
jQuery Traversing
jQuery Traversing
jQuery Ancestors
jQuery Descendants
jQuery Siblings
jQuery Filtering
jQuery AJAX
jQuery AJAX Intro
jQuery Load
jQuery Get/Post
jQuery Misc
jQuery noConflict()
jQuery Filters
Previous
jQuery - Filters
jQuery Filters
Use jQuery to filter / search specific elements.
Filter Tables
Do a casual search for items in the 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>
Explained example: We use jQuery to open lines for each table to check if there are text values that match the input field value. The toggle() method hides a row (display: none) that does not match the search. We use the toLowerCase() DOM method to convert text into lowercase, making the search character insensitive (allowing "john", "John", and "JOHN" to search).
Filter Lists
Do a random search for items listed:
Example
Type something in the input field to search the list for items:
- First item
- Second item
- Third item
- Fourth
Filter Anything
Do a non-text search within the div element:
Example
I am a paragraph.
Another paragraph.