一、过滤
<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Document</title> <link rel='stylesheet' href='demo.css'> <script type="text/javascript" src='jquery/dist/jquery.min.js'></script> <script type="text/javascript" src='demo.js'></script> </head> <body> <div class="jq22"> <input id="search_input" placeholder="输入文字开始筛选"> <ul id="search_list"> <li>哈哈</li> <li>刚刚</li> <li>坨坨</li> <li>宝宝</li> <li>那你</li> <li>慢慢</li> <li>等待</li> <li>上市</li> <li>啊啊</li> <li>这种</li> <li>现象</li> <li>问我</li> <li>请求</li> </ul> </div> </body> <script> //jquery.fastLiveFilter.js jQuery.fn.fastLiveFilter = function(list, options) { options = options || {}; list = jQuery(list); var input = this; var lastFilter = ''; var timeout = options.timeout || 0; var callback = options.callback || function() {}; var keyTimeout; var lis = list.children(); var len = lis.length; var oldDisplay = len > 0 ? lis[0].style.display : "block"; callback(len); input.change(function() { var filter = input.val().toLowerCase(); var li, innerText; var numShown = 0; for (var i = 0; i < len; i++) { li = lis[i]; innerText = !options.selector ? (li.textContent || li.innerText || "") : $(li).find(options.selector).text(); if (innerText.toLowerCase().indexOf(filter) >= 0) { if (li.style.display == "none") { li.style.display = oldDisplay; } numShown++; } else { if (li.style.display != "none") { li.style.display = "none"; } } } callback(numShown); return false; }).keydown(function() { clearTimeout(keyTimeout); keyTimeout = setTimeout(function() { if( input.val() === lastFilter ) return; lastFilter = input.val(); input.change(); }, timeout); }); return this; } $(function() { $('#search_input').fastLiveFilter('#search_list'); }); </script> </html>