jQuery Filters
For certain elements use jQuery for filter/search using filter()
method.
Filter Tables
Find entries in a table using a case-insensitive search :
Example :- To search the table for first names, last names, or email addresses, enter something into the input field :
Firstname
Lastname
Email
John
Doe
john@example.com
Mary
Moe
mary@mail.com
July
Dooley
july@greatstuff.com
Output :-
Firstname | Lastname | |
---|---|---|
John | Doe | john@example.com |
Mary | Moe | mary@mail.com |
July | Dooley | july@greatstuff.com |
Example explained : JQuery is used to go over each row of a table to verify if the text values match the input field value. The function toggle()
hides the row which does not match the search (display:none
). To converts the text to lower case using the toLowerCase()
DOM function, which does not make the search case sensitive (allows "john", "John", and even "JOHN" on search).
Related Links
Filter Lists
Find items in a list using a case-insensitive search :
Example :-
- First item
- Second item
- Third item
- Fourth
Output :-
- First item
- Second item
- Third item
- Fourth
Related Links
Filter Anything
Find text inside a div element using a case-insensitive search :
Example :-
I am a paragraph.
I am a div element inside div.
Another paragraph.
Output :-
I am a paragraph.
Another paragraph.