jQuery Filters

For certain elements use jQuery for filter/search using filter() method.

You can also search for these topics, Example for jquery search filter, multiple values and conditions used in jquery filter, select options by value, define array of objects, select the single and multiple list, html table and elements, html content and property, xml and array data by attribute value defined by jquery filter, search the div tag.

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 :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<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>

</head>
<body>

<input id="myInput" type="text" placeholder="Type something..." />
<br /><br />

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@mail.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@greatstuff.com</td>
  </tr>
  </tbody>
</table>
  
</body>
</html>

Output :-

Firstname	Lastname	Email
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).

You can also search for these topics, jquery filter table rows by single and multiple column values, pagination method involved in jquery filter table, multiple columns, filter the table based on date range, filter table by column and by row, column and row search, example for jquery table filter and sort.

Filter Lists

Find items in a list using a case-insensitive search :

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#myInput3").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#myList1 li").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>
</head>
<body>

<input id="myInput3" type="text" placeholder="Type something..." />
<br />

<ul id="myList1">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
  <li>Fourth</li>
</ul>
  
</body>
</html>

Output :-

First item
Second item
Third item
Fourth

You can also search for these topics, jquery filter list by text, how to search and open the filter list in jquery, list of elements available in jquery filter, jquery filter list by objects and data attribute, Example for jquery filter lists.

Filter Anything

Find text inside a div element using a case-insensitive search :

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#myInput5").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $("#myDiv1 *").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
            });
        });
    });
</script>
</head>
<body>

<input id="myInput5" type="text" placeholder="Type something..." />

<div id="myDiv1">
  <p>I am a paragraph.</p>
  <div>I am a div element inside div.</div>
  <button>I am a button</button>
  <button>Another button</button>
  <p>Another paragraph.</p>
</div>
  
</body>
</html>

Output :-

I am a paragraph.

I am a div element inside div.

Another paragraph.

You can also search for these topics, jquery filter search anything, use fo data attribute, jquery filter anything html, how to declare multiple conditions, how to filter anything multiple columnsy, plugin, rows by column and column by row value with jquery, example, define the text inside a div element in jquery.