title: Using a dropdown select to sort items in list.js
body: <p>I'm using the plugin list.js to sort a list of items. Currently the example shows a searchbar for filtering, I want to use a drop down select to filter more precisely between two materials "glass" and "plastic".</p>
  
  <p>Here is my fiddle: <a href="http://jsfiddle.net/32u3t1g9/6/" rel="nofollow">http://jsfiddle.net/32u3t1g9/6/</a>  (granted that list.js doesn't play well with it.)</p>
  
  <p>EDIT: updated fiddle with the jquery plug in</p>
  
  <p>Here is my code:</p>
  
  <p>HTML</p>
  
  <pre><code>    &lt;div id="container"&gt;
    &lt;div class="page"&gt;
      &lt;div&gt;
        &lt;h1&gt;piece-y search&lt;/h1&gt;
      &lt;/div&gt;
  
      &lt;div id="main"&gt;
  
  
        &lt;div class="c1"&gt;
          &lt;h2&gt;piece search&lt;/h2&gt;
          &lt;div id="piece-search"&gt;
  
              &lt;ul class="sort-by"&gt;
              &lt;li&gt;
              &lt;input class="search" placeholder="Search pieces" /&gt;
              &lt;/li&gt;
              &lt;li class="sort btn" data-sort="type"&gt;Sort by type&lt;/li&gt;
              &lt;li class="sort btn" data-sort="thickness"&gt;Sort by thickness&lt;/li&gt;
              &lt;li class="sort btn" data-sort="height"&gt;Sort by height&lt;/li&gt;
              &lt;li class="sort btn" data-sort="category"&gt;Sort by style&lt;/li&gt;
            &lt;/ul&gt;
  
            &lt;ul class="filter"&gt;
               &lt;li&gt;
              &lt;select name="material" id="filter-material"&gt;
              &lt;option selected="selected" value="material"&gt;Select a Material&lt;/option&gt;
              &lt;option value="material"&gt;Plastic&lt;/option&gt;
              &lt;option value="material"&gt;Glass&lt;/option&gt;
              &lt;/select&gt; 
              &lt;/li&gt;
              &lt;li class="btn" id="filter-none"&gt;Show all&lt;/li&gt;
              &lt;li class="btn" id="filter-scientific" value="category"&gt;Only show scientific glass&lt;/li&gt;
              &lt;li class="btn" id="filter-artsy" value="category"&gt;Only show artsy glass&lt;/li&gt;
            &lt;/ul&gt;
  
            &lt;ul class="list"&gt;
  
                    &lt;li class="item"&gt;
                      &lt;p class="sorting-info hide-this"&gt;
                      &lt;p class="material"&gt;plastic&lt;/p&gt;
                      &lt;p class="type"&gt;pipe&lt;/p&gt;
                      &lt;p class="thickness"&gt;3mm&lt;/p&gt;
                      &lt;p class="height"&gt;15inch+&lt;/p&gt;
                      &lt;p class="category"&gt;artsy&lt;/p&gt;
                       &lt;/p&gt;
                  &lt;/li&gt;
  
                  &lt;li class="item"&gt;
                      &lt;p class="sorting-info hide-this"&gt;
                      &lt;p class="material"&gt;glass&lt;/p&gt;
                      &lt;p class="type"&gt;pipe&lt;/p&gt;
                      &lt;p class="thickness"&gt;5mm&lt;/p&gt;
                      &lt;p class="height"&gt;14inch-&lt;/p&gt;
                      &lt;p class="category"&gt;scientific&lt;/p&gt;
                       &lt;/p&gt;
                  &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;/div&gt; &lt;!-- end of #container --&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>var options = {
    valueNames: [ 'material', 'type', 'thickness', 'height', 'category' ]
  };
  
  var featureList = new List('piece-search', options);
  
  $('#filter-material').change(function () {
      var selection = this.value; 
  
      // filter items in the list
      featureList.filter(function (item) {
          if (item.values().material == selection) {
              return true;
          } else {
              return false;
          }
      });
  
  });
  
  $('#filter-scientific').click(function() {
    featureList.filter(function(item) {
      if (item.values().category == "scientific") {
        return true;
      } else {
        return false;
      }
    });
    return false;
  });
  
  $('#filter-artsy').click(function() {
    featureList.filter(function(item) {
      if (item.values().category == "artsy") {
        return true;
      } else {
        return false;
      }
    });
    return false;
  });
  
  $('#filter-none').click(function() {
    featureList.filter();
    return false;
  });
  </code></pre>