Beautiful advanced tag filtering with HTML5 and jQuery
JavaScript
Switch branches/tags
Nothing to show
Pull request Compare This branch is 5 commits ahead, 12 commits behind luis-almeida:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
font
img
js
LICENSE.md
README.md
block.html
close.html
highlight.html
index.html
jpages.html
lazyload.html
legend.html
match.html
movies.html
music.html
query.html
reset.html
trigger.html

README.md

filtrify.js

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 for each item in your list, include a "data" attribute 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.

Visit filtrify project page to read the documentation.

Demos

Browser compatibility (tested):

IE7 (buggy); IE8+, Chrome, Firefox, Opera and Safari (current versions - tested!)

Release log:

First release - v0.1 (22.03.2012)