Jquery Sieve Multiple Select

[email protected]

by Ryan Brackett

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.no-icons.min.css">
<div class="span4">
  <h4>Jquery Sieve Multiple Select</h4> The below DropDowns update the single jQuery Sieve input on change. This way, you can lock-down the filters and use cross searching. [email protected]
  <br/>
  <br/>

  <div class="filters">
    <label>Names:
      <select class="names">
        <option></option>
        <option>James</option>
        <option>John</option>
        <option>Roosevelt</option>
        <option>William</option>
      </select>
    </label>

    <label>States:
      <select class="states">
        <option></option>
        <option>Massachusetts</option>
        <option>New York</option>
        <option>Ohio</option>
        <option>Virginia</option>
      </select>
    </label>

    <label>Cities:
      <select class="cities">
        <option></option>
        <option>Charles City</option>
      </select>
    </label>
  </div>



  <div id="presidents">
    <div class="row-fluid form-inline"></div>
    <table class="table table-hover table-bordered table-sieve">
      <thead>
        <tr>
          <th>President</th>
          <th>Birthplace</th>
        </tr>
      </thead>
      <tbody>
        <tr style="display: table-row;">
          <td>Zachary Taylor</td>
          <td>Barboursville, Virginia</td>
        </tr>
        <tr style="display: table-row;">
          <td>Zachary yTalor</td>
          <td>Blooming Grove, Ohio</td>
        </tr>
        <tr style="display: table-row;">
          <td>John Quincy Adams</td>
          <td>Braintree, Massachusetts</td>
        </tr>
        <tr style="display: table-row;">
          <td>John F. Kennedy</td>
          <td>Brookline, Massachusetts</td>
        </tr>
        <tr style="display: table-row;">
          <td>Grover Cleveland</td>
          <td>Caldwell, New Jersey</td>
        </tr>
        <tr style="display: table-row;">
          <td>William...

CSS

.search-box {
  opacity: .5
}

label {
  display: block;
  font-weight: bold;
}

JavaScript

$('.states').on('change', function() {
  $('.sieve').val($('.states').val() + ' ' + $('.names').val() + ' ' + $('.cities').val()).change();
});

$('.names').on('change', function() {
  $('.sieve').val($('.states').val() + ' ' + $('.names').val() + ' ' + $('.cities').val()).change();
});

$('.cities').on('change', function() {
  $('.sieve').val($('.states').val() + ' ' + $('.names').val() + ' ' + $('.cities').val()).change();
});








/*!
 * jQuery Sieve v0.3.0 (2013-04-04)
 * http://rmm5t.github.com/jquery-sieve/
 * Copyright (c) 2013 Ryan McGeary; Licensed MIT
 * Task: allow  searches without the 'keyup' or 'change' events
 */
(function() {
  var $;

  $ = jQuery;

  $.fn.sieve = function(options) {
    var compact;
    compact = function(array) {
      var item, _i, _len, _results;
      _results = [];
      for (_i = 0, _len = array.length; _i < _len; _i++) {
        item = array[_i];
        if (item) {
          _results.push(item);
        }
      }
      return _results;
    };
    return this.each(function() {
      var container, searchBar, settings;
      container = $(this);
      settings = $.extend({
        searchInput: null,
        searchTemplate: "<div class='search-box'><label>Sieve Input:</label><input class='sieve' type='text' disabled></div>",
        itemSelector: "tbody tr",
        textSelector: null,
        toggle: function(item, match) {
          return item.toggle(match);
        },
        complete: $.noop,
        fail: $.noop,
        success: $.noop
      }, options);
      //if no search input was set, create one using the searchTemplate
      if (!settings.searchInput) {
        searchBar = $(settings.searchTemplate);
        //Hold a reference so we can attach the 'on' event onto it
        settings.searchInput = searchBar.find("input");
        container.before(searchBar);
      }

      //This is where all the magic happens! Study this in case you need to modify!
      return settings.searchInput.on("keyup.sieve...