在同位素中按任意顺序匹配单词(使用输入值)

Question

我使用的是带有香草javascript的同位素.js。

在我的项目中，我放置了一个带有display:none的div来隐藏每个项目的关键字。例如，商品Orange具有关键字"color"one_answers"fruit"。因此，如果有人在输入表单中输入这三个单词中的任何一个(橙色、颜色或水果(，该项目将通过同位素显示。

这是一个展示我的项目的jsfiddle。

我想做的是，如果有人以任何顺序将这三个单词全部输入到输入表单中，项目就会显示出来。现在，只有按顺序键入关键字时，项目才会显示。例如，键入"；水果颜色"；将显示项目Orange；彩色水果"；不会。

编辑：这里的答案正是我想要实现的。我将它应用到我的项目的jQuery版本中，效果非常好。然而，我在用香草JS重写它时遇到了麻烦。任何帮助都将不胜感激。

Answer 1

您能尝试更改以下内容吗？我已经将正则表达式删除为字符串

filter: function(itemElem) {
return qsRegex ? itemElem.textContent.indexOf(qsRegex) !== -1 : true;
}
var quicksearch = document.querySelector('input[type="text"]');
quicksearch.addEventListener('input', function() {
// match items by first letter only
qsRegex = quicksearch.value; // Changed here
iso.arrange();
});

Answer 2

我最终让它自己工作。我很抱歉，我还是Javascript的新手，正在通过反复尝试来学习，我不知道如何正确解释我是如何让它工作的。但最终结果是：

var qsRegex;
var quicksearch = document.querySelector('input[type="text"]');
// init Isotope
var iso = new Isotope('#grid', {
itemSelector: '.item',
layoutMode: 'fitRows',
transitionDuration: 1000,
filter: function(itemElem) {
var qsRegex = [];
var resultRegex = [];
var endResult = new Boolean();
var searchID = quicksearch.value;
var searchTable = searchID.split(" ");
for (var i = 0; i < searchTable.length; i++) {
qsRegex[i] = new RegExp("(^|\s)(" + searchTable[i] + ")", 'gi');
resultRegex[i] = qsRegex[i] ? itemElem.textContent.match(qsRegex[i]) : true;
endResult = endResult && resultRegex[i];
}
return endResult;
}
});

// use value of input to filter
var quicksearch = document.querySelector('input[type="text"]');
quicksearch.addEventListener('input', function() {

iso.arrange();

});

更新jsfiddle链接