jQuery - Filters

---

jQuery Filters

Use jQuery to filter/search for specific elements.

---

Filter Tables

Perform a case-insensitive search for items inwards a table:

Example

Type something inwards the input land to search the tabular array for stimulate names, concluding 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>

Example explained: We usage jQuery to loop through each tabular array rows to cheque if at that topographic point are whatever text values that matches the value of the input field. The toggle method hides the row (display:none) that does non stand upwards for the search. We usage the toLowerCase() DOM method to convert the text to lower case, which makes the search instance insensitive (allows "john", "John", in addition to fifty-fifty "JOHN" on search).

---

Filter Lists

Perform a case-insensitive search for items inwards a list:

Example

Type something inwards the input land to search the listing for items:

• First item
• Second item
• Third item
• Fourth

---

Filter Anything

Perform a case-insensitive search for text within a div element:

Example

I am a paragraph.

I am a div chemical component within div.

Another paragraph.

---