Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Branch: master
Fetching contributors…

Cannot retrieve contributors at this time

95 lines (70 sloc) 2.79 KB


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


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


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

Your markup looks like this:

  <ul id="filterList">
        <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>
        <li><a href="#" id="type-animate">Animate</a></li>
        <li><a href="#" id="type-inanimate">Inanimate</a></li>
  <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>

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

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

The required JavaScript:

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


  • 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.


  • jQuery 1.4.2


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.


  • Dylan Fogarty-MacDonald
  • Matt Allen


Copyright © 2010 Plus2. See LICENSE for details.

Jump to Line
Something went wrong with that request. Please try again.