Page Content Filtering Using CSS and jQuery

This is something that I first created for a project at Vanderbilt University when this type of filtering was less common than it is now. The basic idea is to have a keyword match input field on a page that filters page content for the user without making a server request and reloading the page.

View the Demo

Some thoughts on what to do with this:

  • Use to filter list items (as in my example), images, table rows or any type of container.
  • The text that gets targeted by the filter can be hidden (as in my example) or exposed.
  • What happens to matches (or non-matches) can vary according to the added (or removed) class and what it triggers (a style change or a jQuery effect for example).