如何制作一个搜索栏，用类属性过滤列表

Question

我有一个搜索栏，可以根据列表的名称(例如：橙色、铜质(过滤列表。有没有任何方法可以通过使用它们的class属性来过滤结果。

function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("search-bar");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
if (input.value === "") {
[...li].forEach((liElement) => {
liElement.style.display = "none";
});
} else {
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";
}
}
}
}
myFunction();

<input type="text" autocomplete="off" id="search-bar" onkeyup="myFunction()" placeholder="Search...">
<ul id="myUL" style="display:block">
<li><a class="color fruit" href="#">Orange</a></li>
<li><a class="chemical" href="#">H2SO4</a></li>
<li><a class="animal car" href="#">Jaguar</a></li>
<li><a class="element" href="#">Copper</a></li>
</ul>

Answer 1

由于您要用空格输入输入，因此最好将其放入数组中。此外，您在a中有类，即使用a.classList，它将返回类似数组的数据结构中的类。

现在您有两个数组，所以如果所有输入类数组都存在于任何a类中，则可以过滤结果。

最好的部分是，即使像car animal那样按相反的顺序搜索，它也会给你Jaguar

它部分搜索，也搜索部分输入，类似于a c或c a给出Jaguar

function isClassExist(inputClasses, anchorClasses) {
return inputClasses.every(ic => anchorClasses.some(ac => new RegExp(`\b${ic}`).test(ac)))
}
function myFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("search-bar");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
if (input.value === "") {
[...li].forEach((liElement) => {
liElement.style.display = "none";
});
} else {
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
const regex = new RegExp(`\b${input.value.toLowerCase()}`);
const inputClassesAsArray = input.value.toLowerCase().split(" ");
const anchorClassesAsArray = [...a.classList];
if (isClassExist(inputClassesAsArray, anchorClassesAsArray)) {
li[i].style.display = "block";
} else {
li[i].style.display = "none";
}
}
}
}
myFunction();

<input type="text" autocomplete="off" id="search-bar" onkeyup="myFunction()" placeholder="Search for class...">
<ul id="myUL" style="display:block">
<li><a class="color fruit" href="#">Orange</a></li>
<li><a class="chemical" href="#">H2SO4</a></li>
<li><a class="animal car" href="#">Jaguar</a></li>
<li><a class="element" href="#">Copper</a></li>
</ul>