Filtr.js Demos

A few simple demos to whet your appetite. All of these demos and more are bundled with the plugin when you download it.

Items are filtered by 'fuzzy matching' the input. (Case insensitive.)

This means typing 'bi' will match both 'Bison' and 'Ibuki', but not 'Balrog'.

No frills, just call it as it is using only the default options.

(view the code)
$('#input_1').filtr($('#list_1 li'));

Adding show/hide animations

You can change how the items are shown/hidden by using the show/hide callbacks.

(view the code)
$('#input_2').filtr($('#list_2 li'), {
  show : function($item){
    $item.slideDown('fast');
  },
  hide : function($item){
    $item.slideUp('fast');
  }
});

Using a select box

Setting the trigger to 'change' means you can use a dropdown to filter!

The wait parameter has also been set to 0.

(view the code)
$('#input_3').filtr($('#list_3 li'), {
  trigger : 'change',
  wait : 0
});

Filtering on multiple inputs

You can easily filter on more than one input by extending the checkItem callback.

(view the code)
// Get the filters
// as we use them in the callback
var $filters = $('.filtr_4');

$filters.filtr($('#list_4 li'), {
  trigger : 'change',
  wait : 0,
  checkItem : function(value, item){

    // Because we filter from multiple inputs
    // we don't just compare the value passed in.
    // Essentially, it gets ignored.

    var valid = true;

    // Loop through the available filters to get
    $filters.each(function(){

      var $this = $(this);

      if( $this.is(':checked') ){

        // If the checkbox is checked
        // and the value isn't present in the data attr
        if( item.data.indexOf($this.val()) === -1 ){

          valid = false;

        }

      }

    });

    return valid;
  }
});