jQuery - Filters

jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.
Post Reply
Guest

jQuery - Filters

Post by Guest »

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
Email




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




Try it Yourself »


Filter Anything
Perform a case-insensitive search for text inside a div element:

Example






I am a paragraph.
I am a div element inside div.
I am a buttonAnother button
Another paragraph.




Try it Yourself »














+1

Reference: https://www.w3schools.com/jquery/jquery_filters.asp
Post Reply