jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Filters

jQuery can be used to filter/search for specific element(s) in a group of elements.


jQuery filter() Method

The jQuery filter() method returns elements that match a certain criteria.

This method filter out all the elements that do not match the selected criteria and those matches will be returned.


Filter Tables

The following example performs a case-insensitive search for items in a table:

Type something in the input field to search the table for names, cities or phones:


Name City Phone
Vishal Delhi 999945850
Espy Mizoram 8425896528
Mudit Jaipur 9858621233
Ankit Mumbai 9560478555
Nancy Delhi 9210154545
Run code

Example explained:

  • The filter() method check if there are any text values that matches the value of the input field
  • The toggle() method hides the row that does not match the search
  • The toLowerCase() method to convert the text to lower case, which makes the search case insensitive


Filter Lists

The following example performs a case-insensitive search for items in a list:

Type something in the input field to search the list items:


  • London
  • Delhi
  • Beijing
  • Mumbai
  • Bengaluru
Run code

Filter Other Elements

The following example performs a case-insensitive search inside a DIV element:

Type something in the input field:


This is first Paragraph.

This is second Paragraph.

This is a DIV element.

This is last Paragraph.

Run code