在同位素中以任何顺序匹配单词（使用输入值）答案

【问题标题】：Match words in any order in Isotope (using input value)在同位素中以任何顺序匹配单词（使用输入值）
【发布时间】：2020-11-24 07:12:39
【问题描述】：

我正在使用 Isotope.js 和 vanilla javascript。

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

Here is a jsfiddle showing my project.

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

编辑： This answer here 正是我想要实现的目标。我将它应用到我的项目的 jQuery 版本中并且运行良好。但是，我在 vanilla JS 中重写它时遇到了麻烦。非常感谢任何帮助。

【问题讨论】：

标签： javascript input jquery-isotope

【解决方案1】：

我最终让它自己工作。抱歉，我还是 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

【讨论】：

【解决方案2】：

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

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();
});

【讨论】：

谢谢，但这并没有什么不同