javascript - 组合过滤器+同位素快速搜索

Question

我正在尝试组合两个同位素过滤功能( combination filtering via checkbox 和 quick search )，但没有成功。我的尝试在这里:https://codepen.io/anon/pen/WJvmaj ，它是上述两个功能演示的组合。

目前，搜索设置为返回 searchResult 和 checkboxResult，后者在我所知的代码中没有正确定义，并且存在我的问题:我不确定将 checkboxResult 变量设置为什么，以便它能够定位复选框过滤返回的内容。

Answer 1

使用 .includes() 检查元素是否包含在搜索输入中输入的文本，以及元素是否具有复选框值中选定的任何类。

顺便说一句，下次请提供Minimal, Complete, and Verifiable example这说明了问题，而不是指向您的 fiddle 或 codepen 的链接，因为链接会被破坏，其他用户无法理解您的问题和问题的场景。

$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>