What?

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.

Style

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 stringrequired

The ID of the container of the items you want to apply the plugin to.

placeHolderID stringrequired

The ID of the element where you want to place the generated menu.

options objectoptional

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

Download

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.