IE7 - [buggy} IE8+, Chrome, Firefox, Opera, Safari - (tested)

What?

Filtrify is an advanced tag filtering plugin, inspired by Chosen multiple select feature and Orman Clark’s Vertical Navigation Menu.

Advanced because you can search tags within tags and filter items by multiple tags from different categories and get a live feedback on the number of items containing related tags.

How?

Filtrify makes use of the new HTML5 "data" attribute to store the metadata.

All you have to do is include a "data" attribute for each item in your list with the respective tags (metadata). If you have more than one category of tags, include them in another "data" attribute. You can add as much categories of tags as you need.

Filtrify will then go through all the data attributes you included in your items and it will create a search menu with as many fields as the different number of categories (data-attributes) you provided. Each field label in the menu fires a "popup" filtering panel and there's where all the magic happens.

The plugin instanciation is very simple, you just have to pass a "containerID" and a "placeHolderID" which is the ID of the element where you want to place the menu.

Usage

Add jQuery, filtrify.js and filtrify.css to the <head> section of your page (correct file locations first):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/fitrify.js"></script>
<link rel="stylesheet" href="css/filtrify.css">

The HTML markup is really easy to understand and set up. You just have to be careful about these five things:

So, imagine that you have a list of singers/bands and each one of them have a list of "genre" tags. Your HTML would have to look like this:

<div id="placeHolder"></div>

<ul id="container">
    <li data-genre="pop, rock, british, classic rock"> The Beatles </li>
    <li data-genre="rock, british, blues, classic rock"> The Rolling Stones </li>
    <li data-genre="alternative, electronic, female vocalists"> Björk </li>
    <li data-genre="rock, alternative, grunge"> Foo Fighters </li>
    <li data-genre="rock, classic rock"> Bruce Springsteen </li>
    ...
</ul>

Then you just have to instantiate the plugin when the document is ready and pass the "containerID" and "placeHolderID":

$(function() {

    $.filtrify("container", "placeHolder");

});

And that's it! Check out the demos below to see it in action.

Demos

Style

Filtrify default looks was inspired by Orman Clark’s Vertical Navigation Menu - see tutorial.

The plugin CSS file might look a bit confusing and long at the begining but I'm sure you'll find it easy to costumize after inspecting the HTML for just a bit.

Filtrify relies heavily in the ":before" and ":after" pseudo-elements and in the "content" property. If you're not familiar with them, here is a great article to get started. Don't forget that IE8 only supports the "content" property if a !DOCTYPE is specified. If you also want to fully support IE7 you can try IE7.js (not tested!).

For the icons, I used fontomas to extract only the icons being used from the web symbols and iconic webfonts. Don't forget to include the font files and correct the url in the CSS file.

Documentation

Instantiation:

$.filtrify( containerID, placeHolderID, options );

Arguements:

containerID string required
The ID of the container of the items you want to apply the plugin to.
placeHolderID string required
The ID of the element where you want to place the generated menu.
options object optional
Plugin options. See below.

Options [type] [default]:

noresults String"No results match"
In this parameter you can set the "No results" search text when you're searching for tags.
hide Booleantrue
By default filtrify hides all the items that don't match the filtering query. If you set hide to false, filtrify will no longer hide the mismatched ones. Because you can still have access to the matched and mismatched items in the callback function, you can then do whatever you want with the result of the query. See the highlight demo.
close Booleanfalse
If you want the filtering panel to close after adding a tag, set close to "true". See demo.
query Objectno default
You can instantiate the plugin with a default filtering query. This parameter receives an object with the same sturcture as the trigger method (See below). See demo.
block Arrayempty array
Filtrify goes through all the "data" attributes in your items and assumes they are all categories of metadata. If you need to use a data attribute to store some information and you don't want the plugin to index it as a category, you can add that "data" attribute to the block list. Filtrify won't think it's a category anymore. See demo.
callback functionfunction (query, match, mismatch) {}
In this parameter you can pass a function that will run everytime a tag is added or removed. This function receives three arguments: The filtering query (object) and two HTML collections: the matched items (match) and the mismatched ones (mismatch).
There are a lot of interesting things you can do using the callback function, like adding a legend, highlighting matched items, or even adding pagination, animations and lazy loading of images with jPages, Animate.css and lazyload.

Methods:

Create an instance
var ft = $.filtrify("containerID", "placeHolderID");
Reset
ft.reset();
Trigger
var query = { 
  category1 : [tags], 
  category2 : [tags], 
  ... 
};

ft.trigger( query );

See trigger and reset demos to have a better understanding of their usage.

Download

Download the last version from the project page on GitHub.

Contact

I intend to add more features in the future and especially make Filtrify touch friendly and responsive, but it will all depend on the amount of feedback I have from people actually using it. So if you're using Filtrify let me know!

You can get in touch with me on twitter or also through my github account.

Donate

I didn't have a donate button when I first published this plugin because it is not my intention to make money from it.

I released Filtrify under the MIT license, so it is free for personal and commercial use.

However, I've been receiving a lot of amazing feedback from awfully generous people who often want to buy me a beer in order to show their gratitude for my work.

Donations are also the best way to support the development of Filtrify, allowing me to take some time to add more features in the future.

So if you like the plugin, be so kind as to make a small donation. Donations are made thru Paypal, but you don't need a Paypal account to make a donation.

Any ammount will be deeply appreciated!