Question

Todo：

我需要用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>

Answer 1

您要的是这个吗，如果可以，就可以了。

<!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>

Answer 2

您可以使用类似match-sorter的库。进行模糊搜索非常好。

如果您未使用node / es6 env，则可以使用https://unpkg.com/match-sorter@2.3.0/dist/match-sorter.cjs.js直接将此库包含在代码中。将此JS包含到HTML中，并将搜索逻辑包含在script标记内。

Answer 3

尝试一下

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);
    });
});

需要搜索框过滤器javascript

3 个答案: