JS filters-ul li简单过滤

2021-05-17 19:27

阅读：696

标签：lower .com indexof ott lte ice href font jquery

功能要求：在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 Bintitle>
 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="#">Adelea>li>
13   li>a href="#">Adeaba>li>
14   li>a href="#">Adqlla>li>
15   li>a href="#">Adella>li>
16   li>a href="#">Agnesa>li>
17 
18   li>a href="#">Billya>li>
19   li>a href="#">Boba>li>
20 
21   li>a href="#">Calvina>li>
22   li>a href="#">Christinaa>li>
23   li>a href="#">Cindya>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){
 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 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){
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){
 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简单过滤

标签：lower .com indexof ott lte ice href font jquery

原文地址：http://www.cnblogs.com/coding-swallow/p/7742277.html

上一篇：phpdocumentor生成代码注释文档（linux）

下一篇：js2 dom讲解

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：JS filters-ul li简单过滤
文章链接：http://soscw.com/index.php/essay/86845.html

亲，登录后才可以留言！

JS filters-ul li简单过滤

评论

热门文章

推荐文章

最新文章

置顶文章