Sifter

Sifter is a jQuery plugin that can be used to implement client–side faceted search.

Usage

Each facet (a.k.a. filter) has an ID. Any filtered item (i.e. search result) that is relevant to a particular filter uses that filter's ID as a class.

Sifter is composed of 3 plugins:

• sifter: listens to the facets and when they're changed, tells the filtered items what to do
• filterList: deals with the facets
• filteredList: deals with the items being filtered

Example

You can find a functioning version of this example in this repository's examples directory.

Your markup looks like this:

<div>
  <ul id="filterList">
    <li>
      <h3>Size</h3>
      <ul>
        <li><a href="#" id="size-big">Big</a></li>
        <li><a href="#" id="size-medium">Medium</a></li>
        <li><a href="#" id="size-small">Small</a></li>
      </ul>
    </li>
    <li>
      <h3>Type</h3>
      <ul>
        <li><a href="#" id="type-animate">Animate</a></li>
        <li><a href="#" id="type-inanimate">Inanimate</a></li>
      </ul>
    </li>
  </ul>
  <a href="#" class="clear-filters">Clear filters</a>
  <ul id="filteredList">
    <li class="type-inanimate size-big">House</li>
    <li class="type-inanimate size-medium">Car</li>
    <li class="type-animate size-small">Mouse</li>
    <li class="type-inanimate size-big">Ship</li>
    <li class="type-animate size-medium">Cat</li>
    <li class="type-animate size-small">Toadstool</li>
  </ul>
</div>

Add some CSS. You only want relevant items visible and you also want to highlight active filters:

<style>
  #filterList .active {font-weight:bold}
  #filteredList li {display:none}
  #filteredList li.active {display:block}
</style>

The required JavaScript:

<script src="jquery-1.4.2.min.js"></script>
<script src="jquery.sifter.js"></script>
<script>
  $(function() {
    $('div').sifter({
      filteredListOpts: {
        filteredSelector: 'li'
      }
    });
  });
</script>

Examples

• examples/from_readme.html: a functioning version of the above code
• examples/basic.html: another simple example, although it's almost pretty

I will be adding further examples, such as integrating with pagination, showing result counts, auto-complete filters, pre–loading active filters and use with AJAX.

Requirements

• jQuery 1.4.2

Browsers

Tested in IE7 & 8, although I can't think of a reason why it shouldn't work in IE6. Firefox, Opera, Safari and Chrome all love it.

Contributors

• Dylan Fogarty-MacDonald
• Matt Allen

Copyright

Copyright © 2010 Plus2. See LICENSE for details.