功能要求：在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 ref16 ?* input:str=>input.value, ref=>li.text17 ?* output:true=>match, false=>not match18 ?*/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简单过滤
原文地址：http://www.cnblogs.com/coding-swallow/p/7742277.html