在 Isotope 中以任意顺序匹配单词（使用输入值）

Question

我正在使用 Isotope.js 和原版 javascript。

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

Here is a jsfiddle showing my project.

我想做的是，如果有人将所有三个词输入表单以任何顺序，该项目就会显示。现在，只有按顺序输入关键字时，该项目才会显示。例如，输入“fruit color”将显示项目 Orange，但输入“color fruit”则不会。

编辑： This answer here 完全符合我的要求。我将它应用到我的项目的 jQuery 版本并且运行良好。但是，我在用 vanilla 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();


});

Updated jsfiddle link

在 Isotope 中以任意顺序匹配单词（使用输入值）

Match words in any order in Isotope (using input value)

javascript

input

jquery-isotope