jQuery使用关键字搜索和过滤

Question

我正在尝试编写一个搜索/过滤器函数，该函数根据用户键入的内容搜索具有data- *属性的无序列表项。

<input type="text" placeholder="Search..." id="myInput" onkeyup="myFunction()">        
<ul id="myUL">
    <li><a href="#" data-keywords="photography">Digital Media Design</a></li>
    <li><a href="#" data-keywords="computers">Information Technology</a></li>
    <li><a href="#" data-keywords="coding">Programming</a></li>
</ul>

这是到目前为止我只适用于一个数据关键字项的代码。 我需要帮助以获取基于多个关键字的搜索结果。

<li><a href="#" data-keywords="photography photoshop illustrator premiere">Digital Media Design</a></li>

// Search functionality
function myFunction() {
    // Declare variables
    var input, filter, ul, li, a, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName('li');
    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1 || $(a).data("keywords") === filter.toLocaleLowerCase()) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

如果有人对我如何改善代码提出建议，那就太好了！

Answer 1

这为我工作：

// Get all li's and create an array with each li's data attributes
const lis = document.querySelector("#myUL").children;

const keywordArray = [];

[...lis].forEach((li, i) => {
  keywordArray.push(li.children[0].dataset.keywords);
});

function myFunction() {
  //Show any previous hidden li's
  [...lis].forEach(li => {
    li.style.display = 'block';
  });

  const inputArray = document.querySelector('#myInput').value.split(' ');
  const indexes = [];
  // For each word in the input field, search through our data attribute array
  inputArray.forEach(term => {
    keywordArray.forEach((keywords, i) => {
      keywords.split(' ').forEach(keyword => {
        // If we find a match, add the index of the data attribute array, which
        // will be the same as the index of the li element
        if (keyword === term) {
          indexes.push(i);
        }
      });
    });
  });
  // If we have a match, hide every non-matching li'
  if (indexes.length) {
    [...lis].forEach((li, i) => {
      if (!indexes.includes(i)) {
        li.style.display = 'none';
      }
    });
  }
}

为了澄清起见，您是否要使用其他搜索词来使搜索更具体或更具体？ 因为我的解决方案使搜索不太明确，因为它将显示与任何搜索词匹配的li。

Answer 2

我做了一些假设：

• 如果提供了多个搜索词，则它们必须全部匹配。
• 搜索词必须是字母az。 可以很容易地更改它以包括其他字符，例如数字，但是最终我们需要一种方法来确定一个术语在哪里结束而下一个术语在哪里开始。
• 匹配基于子字符串。

最需要解释的位是那个正则表达式。 它使用标准技巧来进行and匹配：

正则表达式：是否有AND运算符？

因此，如果您搜索digital photography ，RegExp将等同于：

/(?=.*digital)(?=.*photography)/i

如果您想搜索“是” or不是” and则只需要相应地调整RegExp。 如果你想做一个开始，与之相匹配的，而不是子串，你可以扔在\\b每个搜索词前（适当转义为\\\\b在字符串中）。

我希望其余的内容可以不言自明，我试图使代码保持在问题中。

 // Search functionality function myFunction() { // Declare variables var input = document.getElementById('myInput'), filter = input.value, ul = document.getElementById('myUL'), lis = ul.getElementsByTagName('li'), searchTerms = filter.match(/[az]+/gi), re, index, li, a; if (searchTerms) { searchTerms = searchTerms.map(function(term) { return '(?=.*' + term + ')'; }); re = new RegExp(searchTerms.join(''), 'i'); } else { re = /./; } // Loop through all list items, and hide those who don't match the search query for (index = 0; index < lis.length; index++) { li = lis[index]; a = li.firstChild; if (re.test(a.innerHTML + ' ' + a.getAttribute('data-keywords'))) { li.style.display = ''; } else { li.style.display = 'none'; } } } 

 <input type="text" placeholder="Search..." id="myInput" onkeyup="myFunction()"> <ul id="myUL"> <li><a href="#" data-keywords="photography photoshop illustrator premiere">Digital Media Design</a></li> <li><a href="#" data-keywords="computers">Information Technology</a></li> <li><a href="#" data-keywords="coding">Programming</a></li> </ul>