待办事项 ：
- 我需要在javascript中搜索框过滤器，用于搜索和过滤每个
- 当我输入单词时，例如
c，它会显示calvin, cars, cinama。
下面是一个示例列表。
<ul> <li><a HREF="#">KINDY</a></li> <li><a HREF="#">BILLY</a></li> <li><a HREF="#">DOB</a></li> <li><a HREF="#">CALVIN</a></li> <li><a HREF="#">ACNE</a></li> <li><a HREF="#">boil</a></li> <li><a HREF="#">cars</a></li> <li><a HREF="#">cinama</a></li> <li><a HREF="#">lamp</a></li> </ul>
这是您要找的吗，如果是的话，它工作正常。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<ul id="myUL">
<li><a href="#">Hello</a></li>
<li><a href="#">Is</a></li>
<li><a href="#">This</a></li>
<li><a href="#">What</a></li>
<li><a href="#">You</a></li>
<li><a href="#">are</a></li>
<li><a href="#">Looking?</a></li>
</ul>
<script>
function myFunction() {
var input, filter, ul, li, a, i;
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];
if (a.innerHTML.toUpperCase().indexOf(filter)===0) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
</body>
</html>您可以使用匹配排序器等库。它在进行这种模糊搜索方面做得很好。
如果您没有使用 node/es6 env，那么您可以使用 https://unpkg.com/match-sorter@2.3.0/dist/match-sorter.cjs.js 直接将此库包含在您的代码中。将此 JS 包含在您的 HTML 中，并在script标记中包含搜索逻辑。
试试这个
.HTML
<ul id="MyList">
<li><a href="#">KINDY</a></li>
<li><a href="#">BILLY</a></li>
<li><a href="#">DOB</a></li>
<li><a href="#">CALVIN</a></li>
<li><a href="#">ACNE</a></li>
<li><a href="#">boil</a></li>
<li><a href="#">cars?</a></li>
<li><a href="#">cinama</a></li>
<li><a href="#">lamp</a></li>
</ul>
脚本
$(document).on('keyup change','#YourSearchBox',function(){
var SearchString=$(this).val();
var Names=$('#MyList').find('a');
$('#MyList').empty();
var List='';
$.each(Names,function(i,ListName){
if(ListName.text.toLowerCase().includes(SearchString.toLowerCase()))
{
List+='<li style="display:block"><a href="#">'+ListName.text+'</a></li>'
}
else
{
List+='<li style="display:none"><a href="#">'+ListName.text+'</a></li>'
}
});
$('#MyList').append(List);
});
});