Adding a legend with the callback function

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

<div id="legend"><i>Viewing all.</i></div>

<ul id="container">
	<li data-genre="Drama, Sci-Fi, Thriller" data-actors="Harrison Ford, Rutger Hauer, Sean Young, Edward James Olmos" data-director="Ridley Scott"> ... Blade Runner ... </li>
	<li data-genre="Action, Crime, Drama, Thriller" data-actors="Christian Bale, Michael Caine, Ken Watanabe, Liam Neeson" data-director="Christopher Nolan"> ... Batman Begins ... </li>
	<li data-genre="Drama" data-actors="Mark Wahlberg, Julianne Moore, Burt Reynolds, Luis Guzmán" data-director="Paul Thomas Anderson"> ... Boogie Nights ... </li>
	<li data-genre="Action, Adventure" data-actors="Harrison Ford, Sean Connery, Alison Doody, Denholm Elliott" data-director="Steven Spielberg"> ... Indiana Jones and the Last Crusade ... </li>
	<li data-genre="Crime, Mystery, Thriller" data-actors="Harvey Keitel, Tim Roth, Michael Madsen, Chris Penn" data-director="Quentin Tarantino"> ... Reservoir Dogs </li>
	...
</ul>
$(function() {

	/*
		Simple callback function that writes a legend for all the categories and also a counter.
		Setting "close" to true closes the panel everytime a tag is added so you can see the 
		legend working right away.
	*/

	$.filtrify("container", "placeHolder", {
		close : true,
		callback : function( query, match, mismatch ) {
			if ( !mismatch.length ) {
				$("#legend").html("<i>Viewing all movies.</i>");
			} else {
				var category, tags, i, tag, legend = "<h4>Viewing:</h4>";
				for ( category in query ) {
					tags = query[category];
					if ( tags.length ) {
						legend += "<p><span>" + category + ":</span>";
						for ( i = 0; i < tags.length; i++ ) {
							tag = tags[i];
							legend += "<em>" + tag + "</em>";
						};
						legend += "</p>";
					};
				};
				legend += "<p><i>" + match.length + " movie" + (match.length !== 1 ? "s" : "") + " found.</i></p>";
				$("#legend").html( legend );
			};
		}
	});

});
Viewing all.