javascriptjqueryjquery-isotope

Combination filters + quick search with Isotope

I’m trying to combine two Isotope filtering features (combination filtering via checkbox and quick search) with no luck. My attempt is here: https://codepen.io/anon/pen/WJvmaj, which is a combination of both of the mentioned feature's demos.

At the moment the search is set to return searchResult and checkboxResult, the latter of which isn’t being defined properly in the code I can tell, and there lies my problem: I’m not sure what to set the checkboxResult variable to in order for it to target what’s being returned by the checkbox filtering.

Solution

  • Check if the element includes the text that input in search input or not with .includes() and if the element has any of selected class from checkboxs' value.

    $container.isotope({
    filter: function() {
        var $this = $(this)
        var checkText = text == '' ? true : $this.text().includes(text)
        var checkClass = inclusives.length == 0 ? true : false;
        $.each(inclusives, function(index, c) {
            var _class = $this.hasClass(c)
            if (_class) {
                checkClass = true;
                return;
            }
        })
        return checkText && checkClass
     }
})


    // quick search regex
var qsRegex;
var checkboxFilter;

// templating
var colors = ['red', 'green', 'blue', 'orange'];
var sizes = ['small', 'medium', 'large'];
var prices = [10, 20, 30];

createItems();

// init Isotope
var $container = $('#container')

var $output = $('#output');

// filter with selects and checkboxes
var $checkboxes = $('#form-ui input');

function createItems() {

  var $items;
  // loop over colors, sizes, prices
  // create one item for each
  for (var i = 0; i < colors.length; i++) {
    for (var j = 0; j < sizes.length; j++) {
      for (var k = 0; k < prices.length; k++) {
        var color = colors[i];
        var size = sizes[j];
        var price = prices[k];
        var $item = $('<div />', {
          'class': 'item ' + color + ' ' + size + ' price' + price
        });
        $item.append('<p>' + size + '</p><p>$' + price + '</p>');
        // add to items
        $items = $items ? $items.add($item) : $item;
      }
    }
  }

  $items.appendTo($('#container'));

}
var $quicksearch = $('#quicksearch')

// debounce so filtering doesn't happen every millisecond
function debounce(fn, threshold) {
  var timeout;
  threshold = threshold || 100;
  return function debounced() {
    clearTimeout(timeout);
    var args = arguments;
    var _this = this;

    function delayed() {
      fn.apply(_this, args);
    }
    timeout = setTimeout(delayed, threshold);
  };
}

function Filter() {
  // map input values to an array
  var inclusives = [];
  // inclusive filters from checkboxes
  $checkboxes.each(function(i, elem) {
    // if checkbox, use value if checked
    if (elem.checked) {
      inclusives.push(elem.value);
    }
  });

  // combine inclusive filters
  var filterValue = inclusives.length ? inclusives.join(', ') : '*';

  var text = $quicksearch.val()

  $container.isotope({
    filter: function() {
      var $this = $(this)
      var checkText = text == '' ? true : $this.text().includes(text)
      var checkClass = inclusives.length == 0 ? true : false;
      $.each(inclusives, function(index, c) {
        var _class = $this.hasClass(c)
        if (_class) {
          checkClass = true;
          return;
        }
      })
      return checkText && checkClass
    }
  })
  $output.text(filterValue);
}

$quicksearch.on('input', debounce(function() {
  Filter()
}));

$checkboxes.change(function() {
  Filter()
});
    * {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

.item {
  width: 100px;
  height: 100px;
  float: left;
  margin: 5px;
  padding: 5px;
}

.item p {
  margin: 0;
}

.red {
  background: #F33;
}

.blue {
  background: #88F;
}

.green {
  background: #3A3;
}

.orange {
  background: orange;
}

select,
label,
input {
  font-size: 20px;
}

label {
  margin-right: 10px;
}

#quicksearch {
  height: 30px !important;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>

<p><input type="text" id="quicksearch" placeholder="Search" /></p>

<div id="form-ui">
  <p>
    <label><input type="checkbox" value="red" /> red</label>
    <label><input type="checkbox" value="green" /> green</label>
    <label><input type="checkbox" value="blue" /> blue</label>
    <label><input type="checkbox" value="orange" /> orange</label>
  </p>

  <p id="output">--</p>

</div>

<div id="container">
  <!-- items added with JS -->
</div>