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

$('#my-list').instaFilta();

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.

Name	Born
Albert Einstein	1879
Marie Curie	1867
Isaac Newton	1643
Henry Cavendish	1731
Edwin Hubble	1889

<tr class="instafilta-target">
  <td>Albert Einstein</td>
  <td>1879</td>
</tr>

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

$('#my-list').instaFilta({
  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

$('#my-list').instaFilta({
  markMatches: true
});

Only match the beginning of a word

Easy! Just set the beginsWith option to true.

Bald Bull
Soda Popinski
Don Flamenco
Mike

$('#my-field').instaFilta({
  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.

Mammals

Bear
Badger
Moose
Hedgehog
Tiger
Orangutan
Wombat
Blue Whale

Reptiles

Snapping Turtle
Nile Crocodile
Tiger Snake
Green Iguana
Alligator
Chameleon
Gekko
Black Mamba

Birds

Ostrich
Atlantic Puffin
Flamingo
Hummingbird
Penguin
Albatross
Toucan
Mandarin Duck

<div class="instafilta-section">
  <h2>Birds</h2>
  <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>
  </ul>
</div>

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');

$('#my-list').instaFilta({
  onFilterComplete: function(matchedItems) {

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

    $myMessage.text(message);
  }
});

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>
</select>

<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>

Table of contents