Javascript 列表过滤器 - 包含任何单词而不是包含

Question

我有一个脚本，目前允许我根据输入框过滤列表。我的问题是它基于包含我输入的短语而不是包含我输入的任何单词的列表进行过滤。

谁能帮我调整一下，让它根据包含我输入的任何单词进行过滤？例如，如果我输入“Primary home”，它应该过滤所有带有 Primary 或 Home 字样的列表项。

目前它搜索“主家庭”，在本例中将显示未找到匹配项。

function myFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

<div>
  <input id="myInput" />
  <button onclick="myFunction()">Search</button>
  <ul id="myUL">
    <li><a>MY HOUSE</a></li>
    <li><a>PRIMARY CARE HOME</a></li>
  </ul>
</div>

Answer 1

您的代码可以大大简化。首先使用split 获取输入到输入中的所有单词的数组。然后查找任何包含some 的搜索词项：

function myFunction() {
  const searchTerms = document.querySelector("#myInput").value.toUpperCase().split(" ");
  
  const listItems = document.querySelectorAll("#myUL li a");
  [...listItems].forEach(a => {
      const txtValue = (a.textContent || a.innerText).toUpperCase();
      a.parentElement.style.display = searchTerms.some(v => txtValue.indexOf(v) > -1) 
            ? "" 
            : "none";
  });
}

<div>
  <input id="myInput" />
  <button onclick="myFunction()">Search</button>
  <ul id="myUL">
    <li><a>MY HOUSE</a></li>
    <li><a>PRIMARY CARE HOME</a></li>
  </ul>
</div>

Answer 2

您可能必须将输入转换为具有空间分割的数组。你可以试试下面的代码：

function myFunction() {
    var input, filter, ul, li, a, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase().split(" ");
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        txtValue = a.textContent || a.innerText;
        if (filter.includes(txtValue.toUpperCase())) {
            li[i].style.display = "block";
        } else {
            li[i].style.display = "none";
        }
    }
}

const btn = document.querySelector("button");
btn.onclick = () => myFunction();

<div>
<input id="myInput" />
<button>Search</button>
<ul id="myUL">
<li><a>Blue</a></li>
<li><a>Moon</a></li>
</ul>
</div>

Answer 3

不确定我是否真的理解你的目标，但似乎你真的很接近解决方案

function myFunction() {
    var input = document.getElementById("myInput");
    var filter = input.value.toUpperCase();

    //Here we will split the input value, removing the empty elements if more than one consecutive space
    var allWords = filter.split(' ').filter( e => e !== '');

    var ul = document.getElementById("myUL");
    var li = ul.getElementsByTagName("li");
    
    for (var i = 0; i < li.length; i++) {
        var a = li[i].getElementsByTagName("a")[0];
        var txtValue = a.textContent || a.innerText;


        //is txtValue present in the array?
        if ( allWords.toUpperCase().indexOf(txtValue) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

Answer 4

其中一种方法是使用正则表达式。请检查下面的代码。

const li = [
  "How are you",
  "As you know",
  "No i don't",
  "know how",
  "Walls matter",
  "Paint my bed"
];
function check(filter) {
  for (var i = 0; i < li.length; i++) {
    const a = li[i];
    const txtValue = a.toUpperCase();
    filter = filter.toUpperCase();
    if (new RegExp(filter.split(" ").join("|")).test(txtValue)) {
      //if (txtValue.toUpperCase().indexOf(filter.toUpperCase()) > -1) {
      console.log(a);
    }
  }
}
check("how do i paint paint my walls");