Tutorial

❮ Previous Next ❯

Filters for jQuery

To locate particular elements, use jQuery.

Tables for Filtering

Lookup for elements in a database using only a case-insensitive search:

EXAMPLE ❯


                                <script><br />
$(document).ready(function(){<br />
  $("#myInput").on("keyup", function() {<br />
    var value = $(this).val().toLowerCase();<br />
    $("#myTable tr").filter(function() {<br />
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)<br />
    });<br />
  });<br />
});<br />
</script>

An illustration is as described in the following:

jQuery is used to iterate through every table row and see whether text values match the value of input field. The toggle() method conceals the row that does not satisfy the search (display:none). We change the text to lower case using the toLowerCase() DOM technique, that renders the search case neutral (it permits the followings "john", "John", and even "JOHN" on search).

List Filtering

For items in a list, conduct a case-insensitive lookup:

Illustration:

EXAMPLE ❯


                                Enter it in the input to explore the database for things:<br />
<br />
First item<br />
Second item<br />
Third item<br />
Fourth

Filter Multiple things with same.

Browse any data within a div element utilizing case-insensitive hunt:

Illustration:

EXAMPLE ❯


                                I am a paragraph.<br />
<br />
I am a div element inside div.<br />
I am a button Another button<br />
Another paragraph.

❮ Previous Next ❯