被困在搜索js上

Question

function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
ul.style.display = "block";
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";
}
}
}

这是我搜索的代码，但它没有按我需要的方式工作。

示例：

我要搜索的元素是"；净水器-纽约"；。

即使我在搜索中键入Water New，我也希望它能过滤它，但它没有。基本上，搜索需要查找包含给定单词的所有元素，而不管这些单词的顺序如何。

Answer 1

您的示例运行良好，在输入更改时添加一个eventListener，您应该能够过滤出您的记录

还调整了搜索条件，以便根据插入的字母呈现元素。

例如：

1.(输入：wtr；输出：净水器-纽约，世界贸易渲染

2.(输入：wtrp；输出：净水器-纽约

function myFunction(e) {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = e.target.value.toUpperCase()
ul = document.getElementById("myUL");
ul.style.display = "block";
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (filter.split('')
.every(x => txtValue.toUpperCase().split('').some(y => y === x))) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
document.getElementById('search').addEventListener('input', (e) => {
myFunction(e)
})

<ul id="myUL">
<li><a href="#">Water Purifier - New York,</a></li>
<li><a href="#">Poland</a></li>
<li><a href="#">Something3</a></li>
<li><a href="#">world trade render</a></li>
</ul>
<input id="search" type="text" />