标签：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 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>
#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; }
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 })
标签：lower .com indexof ott lte ice href font jquery
原文地址：http://www.cnblogs.com/coding-swallow/p/7742277.html
