JS filters-ul li简单过滤

Posted 2020-10-12 CodingSwallow

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS filters-ul li简单过滤相关的知识，希望对你有一定的参考价值。

功能要求：在input中输入字母，显示ul li中匹配的元素，隐藏不匹配的

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4   <meta charset="utf-8">
 5   <meta name="viewport" content="width=device-width">
 6   <title>JS Bin</title>
 7   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 8 </head>
 9 <body>
10 <input type="text" id="search-input" placeholder="Search for names..">
11 <ul id="name-list">
12   <li><a href="#">Adele</a></li>
13   <li><a href="#">Adeab</a></li>
14   <li><a href="#">Adqll</a></li>
15   <li><a href="#">Adell</a></li>
16   <li><a href="#">Agnes</a></li>
17 
18   <li><a href="#">Billy</a></li>
19   <li><a href="#">Bob</a></li>
20 
21   <li><a href="#">Calvin</a></li>
22   <li><a href="#">Christina</a></li>
23   <li><a href="#">Cindy</a></li>
24 </ul>
25 </body>
26 </html>

HTML

#search-input{
  width:200px;
  height:25px;
  font-size:16px;
  border-radius:5px;
  outline:none;
  border:none;
  border:1px solid orange;
  padding-left:10px;
}
ul{
  list-style:none;
  padding:0;
  margin:0;
  width:200px;
}
li{
  border-bottom:1px solid #ccc;
  padding:5px 10px;
}
a{
  text-decoration:none;
  color:#333;
}

CSS

JS-自己编写的匹配函数

 1 var input=document.getElementById(‘search-input‘);
 2 var lis=document.getElementsByTagName(‘li‘);
 3 input.onkeyup=function(){
 4   var input_str=input.value;
 5   for(var i=0;i<lis.length;i++){
 6     if(match(input_str,lis[i].innerText)){
 7       lis[i].style.display=‘‘;
 8     }
 9     else{
10       lis[i].style.display=‘none‘;
11     }
12   }
13 }
14 /*
15  * test if str match ref,the length str < legnth ref
16  * input:str=>input.value, ref=>li.text
17  * output:true=>match, false=>not match
18  */
19 function match(str,ref){
20   if(str==="")
21     return true;
22   if(str.length>ref.length)
23     return false;
24   for(var i=0;i<str.length;i++){
25     if(str[i]!==ref[i] && str[i].toUpperCase()!==ref[i] && str[i].toLowerCase()!==ref[i]){
26       return false;
27     }
28   }
29   return true;
30 }

JS-使用javascript的indexOf函数

 1 var input=document.getElementById(‘search-input‘);
 2 var lis=document.getElementsByTagName(‘li‘);
 3 input.onkeyup=function(){
 4   var input_str=input.value;
 5   for(var i=0;i<lis.length;i++){
 6     if(!lis[i].innerText.toUpperCase().indexOf(input_str.toUpperCase())){
 7       lis[i].style.display=‘‘;
 8     }
 9     else{
10       lis[i].style.display=‘none‘;
11     }
12   }
13 }

JQuery版

 1 $(function(){
 2   $(‘#search-input‘).on(‘keyup‘,function(){
 3     var $str=$(‘#search-input‘).val();
 4     $(‘ul li‘).each(function(){
 5       if(!$(this).text().toUpperCase().indexOf($str.toUpperCase())){
 6         $(this).show();
 7       }
 8       else{
 9         $(this).hide();
10       }
11     });
12   });
13 })

以上是关于JS filters-ul li简单过滤的主要内容，如果未能解决你的问题，请参考以下文章

vue实现简单的过滤器

为什么我不能在此片段中生成唯一对象数组？

12个用得着的 JQuery 代码片段

关于 li 点击变色的问题，可用JS来解决。

js循环给li绑定事件实现点击li弹出其索引值和内容

用PHP创建动态过滤列表，用JS搜索它们