JS filters-ul li简单过滤

最新推荐文章于 2022-03-11 21:04:14 发布

苘迷

最新推荐文章于 2022-03-11 21:04:14 发布

阅读量403

点赞数

分类专栏：前端文章标签：实践 js filters

原文链接：https://www.mk2048.com/blog/blog.php?id=hbi0jcc20hib&title=JS+filters-ul+li%E7%AE%80%E5%8D%95%E8%BF%87%E6%BB%A4

版权

前端专栏收录该内容

734 篇文章 1 订阅

订阅专栏

功能要求：在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 })