Filtr.js

A small jQuery plugin that helps filter a selection of items.

Filtr.js can be downloaded from GitHub.

Any issues should also be raised via the GitHub issue system; pull requests welcome!

Place /assets/js/filtr.min.js in /your/js/folder/.

Add this just before your closing body tag, after you've included jQuery:

<script src="/your/js/folder/filtr.min.js">

The plugin needs an input to filter by (primarily a text box), and a list of items to filter.

<form action="/">
    <input name="filter">
</form>

<ul class="filter_items">
    <li data-filtr="item 1">Item 1</li>
    <li data-filtr="item 2">Item 2</li>
    <li data-filtr="item 3">Item 3</li>
</ul>

Attach the plugin to the input(s) that trigger the selection, and pass in the items to filter.

var options = {};
$('input[name="filter"]').filtr($('.filter_items li'), options);

NOTE: … denotes omitted code. View the .js file for the complete function.

Option Type Default Description
beforeFilter Function function(value){ … } Callback triggered just before the filtering occurs. Returns the value to be filtered by.
afterFilter Function function(){} Callback triggered just after the filtering occurs.
beforeManip Function function(toShow, toHide){} Callback triggered just before the manipulation of the items occurs. toShow and toHide are arrays of the items to be manipulated
show Function function($item){ … } Callback triggered when an item is shown. Use this to change how an item is shown. (i.e. animated, faded etc.)
hide Function function($item){ … } Callback triggered when an item is hidden. Use this to change how an item is hidden. (i.e. animated, faded etc.)
checkItem Function function(value, $item){ … } Callback triggered when an item is filtered. Use this to change how an item is filtered.
trigger String 'keyup' The trigger to filter on.
wait Integer 200 The wait after each trigger before filtering.
attr String 'data-filtr' The attr to filter on.