<commit_before># Sifter

Sifter is a jQuery plugin that can be used to implement client&ndash;side [faceted search](http://en.wikipedia.org/wiki/Faceted_search "More info on faceted search on Wikipedia").

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

### Example

_You can find a functioning version of this example in the examples/ directory in this repository._

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>

## Requirements

* jQuery (tested with 1.4.2)

## Contributors

* <NAME>
* <NAME>

## Copyright

Copyright &copy; 2010 Plus2. See LICENSE for details.<commit_msg>Readme adjustments.<commit_after># Sifter

Sifter is a jQuery plugin that can be used to implement client&ndash;side [faceted search](http://en.wikipedia.org/wiki/Faceted_search "More info on faceted search on Wikipedia").

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

### 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&ndash;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

* <NAME>
* <NAME>

## Copyright

Copyright &copy; 2010 Plus2. See LICENSE for details.
{'fraction_non_alphanumeric': 0.15234941006002897, 'fraction_numerical': 0.0068308838749741255, 'mean_word_length': 2.5660516605166053, 'pattern_counts': {'":': 0, '<': 127, '<?xml version=': 0, '>': 127, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3449940', 'n_tokens_mistral': 1571, 'n_tokens_neox': 1503, 'n_words': 436}