Multiple Filter

by Lucaskazama

HTML

<pre id=result> </pre>

<div class="list-wrap">

  <h3 style="font-size:14px; font-weight:normal;">Lista de Itens</h3>
  <p style="font-size:12px;"><strong>Procurar pelo preço:</strong></p>
  <form>
    <label style="font-size:12px;">
      <input type="radio" name="price" value="all-prices" id="all-prices" class="hidden-field" /> All</label>
    <br>
    <label style="font-size:12px;">
      <input type="radio" name="price" value="free" id="free" class="hidden-field" /> Free</label>
    <br>
    <label style="font-size:12px;">
      <input type="radio" name="price" value="100" id="100" class="hidden-field" /> $100</label>
    <br>
  </form>
  <p style="font-size:12px;"><strong>Procurar pela categoria:</strong></p>
  <form>
    <label style="font-size:12px;">
      <input type="radio" name="category" value="all-categories" id="all-categories" class="hidden-field" />All</label>
    <br>
    <label style="font-size:12px;">
      <input type="radio" name="category" value="restaurante" id="restaurante" class="hidden-field" />Restaurante</label>
    <br>
    <label style="font-size:12px;">
      <input type="radio" name="category" value="escritorio" id="escritorio" class="hidden-field" />Escritorio</label>
  </form>

</div>

<div class="list">
  <div class="item" data-id="aloe" data-category="all-prices all-categories free escritorio">Aloe</div>
  <div class="item" data-id="lavendar" data-category="all-prices all-categories 100 escritorio">Lavender</div>
  <div class="item" data-id="stinging-nettle" data-category="all-prices all-categories free escritorio">Stinging Nettle</div>
  <div class="item" data-id="gorse" data-category="all-prices all-categories 100 restaurante">Gorse</div>
  <div class="item" data-id="hemp" data-category="all-prices all-categories free escritorio">Hemp</div>
</div>

CSS

body {
  font-family: 'Arial';
  color: #646464;
}

form{
  display: flex;
  flex-flow: column;
}

.list-wrap {
  float: left;
  width: 20%;
  margin: 0 5% 0 0;
  padding: 0;
  position: relative;
}

.list {
  float: left;
  width: 50%;
}

.list div {
  float: left;
  width: 90%;
  height: 68px;
  line-height: 68px;
  padding: 0 5%;
  background: #eee;
  margin: 0 0 1px;
  position: relative;
}
.hidden-field{
  display: none;
}

.active{
  background: #eee;
}

JavaScript

var $filterCheckboxes = $('input[type="radio"]');

$filterCheckboxes.on('change', function() {	
  var selectedFilters = {};

	$filterCheckboxes.parent( 'label' ).removeClass('active');

  $filterCheckboxes.filter(':checked').each(function() {

    if (!selectedFilters.hasOwnProperty(this.name)) {
      selectedFilters[this.name] = [];
      $(this).parent( 'label' ).toggleClass('active');
    }        
    selectedFilters[this.name].push(this.value);

  });

  // create a collection containing all of the filterable elements
  var $filteredResults = $('.item');

  // loop over the selected filter name -> (array) values pairs
  $.each(selectedFilters, function(name, filterValues) {

    // filter each .flower element
    $filteredResults = $filteredResults.filter(function() {

      var matched = false,
        currentFilterValues = $(this).data('category').split(' ');

      // loop over each category value in the current .flower's data-category
      $.each(currentFilterValues, function(_, currentFilterValue) {

        // if the current category exists in the selected filters array
        // set matched to true, and stop looping. as we're ORing in each
        // set of filters, we only need to match once

        if ($.inArray(currentFilterValue, filterValues) != -1) {
          matched = true;
          return false;
        }
      });

      // if matched is true the current .flower element is returned
      return matched;

    });
  });

  $('.item').hide().filter($filteredResults).show();

});