jQuery instaFilta2 Plugin Examples

A simple example

The following shows an example of using instaFilta's default options. Apply CSS class "instafilta-trigger" to a text field to make it initiate the filtering process.

Try it out by entering some text in the input field above the target list. The plugin will bind to any elements having the CSS class instafilta-target and it will ignore character casing. As we will see in other examples, all of this can be customized through the plugin's options.

  • Carbon
  • Cobalt
  • Copper
  • Gallium
  • Gold
  • Hafnium
  • Iridium
  • Xenon

Target ALL the things!

The plugin will look for any text inside an element having the instafilta-target class. In this example, not only can you filter on these important people's names, you can also filter on the year they were born.

Albert Einstein 1879
Marie Curie 1867
Isaac Newton 1643
Henry Cavendish 1731
Edwin Hubble 1889
<tr class="instafilta-target">
  <td>Albert Einstein</td>

Character casing and custom target classes

In this example, the filtering term must match the character casing of the target elements. The plugin will not match "mars" but it will match "Mars".

Also note that we can use a custom CSS class for our targets, if you need to adhere to naming conventions.

  • Mercury
  • Venus
  • Tellus
  • Mars
  • Jupiter
  • Saturn
  • Uranus
  • Neptune
  targets: '.planet-name',
  caseSensitive: true

Highlighting matching characters

By setting the markMatches option to true, you can highlight the matching text within the matching items in the list. The matching characters will get wrapped in a span element that has the instafilta-matching-text CSS class. You can change this class by setting the matchCssClass option.

  • Superman
  • Wonderwoman
  • Batman
  • Spiderman
  • The Hulk
  • The Green Lantern
  • Elektra
  • Ant Man
  markMatches: true

Only match the beginning of a word

Easy! Just set the beginsWith option to true.

  • Bald Bull
  • Soda Popinski
  • Don Flamenco
  • Mike
  beginsWith: true

Using sections of lists

Many times, a large list of data will be grouped in some way. A group will typically contain a heading and perhaps more stuff. The animals in this example are grouped by biological class, which is the heading for each group.

When filtering such a list, you probably want to hide the entire section, including heading etc. Just set the instafilta-section CSS class on the containing section element. That's it! And, you can of course customize that class name using the sections option.

  • Bear
  • Badger
  • Moose
  • Hedgehog
  • Tiger
  • Orangutan
  • Wombat
  • Blue Whale
  • Snapping Turtle
  • Nile Crocodile
  • Tiger Snake
  • Green Iguana
  • Alligator
  • Chameleon
  • Gekko
  • Black Mamba
  • Ostrich
  • Atlantic Puffin
  • Flamingo
  • Hummingbird
  • Penguin
  • Albatross
  • Toucan
  • Mandarin Duck
<div class="instafilta-section">
  <ul class="example-list">
    <li><span class="instafilta-target">Ostrich</span></li>
    <li><span class="instafilta-target">Atlantic Puffin</span></li>
    <li><span class="instafilta-target">Flamingo</span></li>
    <li><span class="instafilta-target">Hummingbird</span></li>
    <li><span class="instafilta-target">Penguin</span></li>
    <li><span class="instafilta-target">Albatross</span></li>
    <li><span class="instafilta-target">Toucan</span></li>
    <li><span class="instafilta-target">Mandarin Duck</span></li>

onFilterComplete returns matched hits

After the filtering process is done, you might want to report just how many hits were found and perhaps show some message if no hits were found. This example shows you how.

  • Peter
  • Lois
  • Stewie
  • Chris
var $myMessage = $('#some-result-message');

  onFilterComplete: function(matchedItems) {

    var message = (matchedItems.length > 0)
      ? "I found " + matchedItems.length + " matches!"
      : "I couldn't find a thing..";


Categorize/tag items

This is a bit similar to using sections, but it has some important differences. You can tag individual target items with several categories. Do this by defining one or more (comma separated string or array) categories in a data-attribute associated with the categoryDataAttr option. You can then use the filterCategory method to perform filtering based on those categories.

In this example, a select box is used to filter out humans and machines. Note that "RoboCop" exists in both the machine category and the human category.

Also note that the result will be filtered on page load if an option is selected from start.

  • R2-D2
  • Terminator
  • John Connor
  • Andreas Weber
  • Johnny 5
  • Gordon Freeman
  • Wall-E
  • RoboCop

Example HTML

<select class="instafilta-trigger">
  <option value="">Show all</option>
  <option value="machine" selected="selected">Machines</option>
  <option value="human">Humans</option>
  <option value="non-fictional">Non-fictional</option>

<span class="instafilta-target" data-instafilta-category="human">Gordon Freeman</span>
<span class="instafilta-target" data-instafilta-category="machine">Wall-E</span>
<span class="instafilta-target" data-instafilta-category="human,machine">RoboCop</span>