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

Question

我\xe2\x80\x99m 尝试组合两个同位素过滤功能（通过复选框和快速搜索进行组合过滤），但没有成功。我的尝试在这里： https: //codepen.io/anon/pen/WJvmaj，它是上述功能演示的组合。

\n\n

目前，搜索设置为 returnsearchResult和checkboxResult，后者在我可以告诉的代码中没有正确定义，这就是我的问题： I\xe2\x80\x99m 不确定要设置什么变量checkboxResultto ，以便它定位复选框过滤返回的\xe2\x80\x99s。

\n

Answer 1

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

顺便说一句，下次请提供一个最小的、完整的和可验证的示例来演示问题，而不是提供指向您的小提琴或代码笔的链接，因为链接会被破坏，其他用户无法理解您所问的内容和问题的场景。

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

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