快捷導(dǎo)航

jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過(guò)濾的方法

更新時(shí)間：2015年08月11日 09:30:05 作者：皮蛋

這篇文章主要介紹了jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過(guò)濾的方法,涉及jquery鼠標(biāo)事件及字符串遍歷的相關(guān)技巧,簡(jiǎn)單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了jquery.fastLiveFilter.js實(shí)現(xiàn)輸入自動(dòng)過(guò)濾的方法。分享給大家供大家參考。具體如下：

本效果是使用jquery.fastLiveFilter.js插件來(lái)實(shí)現(xiàn)的，類(lèi)似于搜索框的輸入提示功能，實(shí)現(xiàn)對(duì)匹配項(xiàng)目的自動(dòng)過(guò)濾功能，當(dāng)你輸入的時(shí)候，會(huì)根據(jù)輸入的字符智能匹配符合的內(nèi)容，自動(dòng)列出來(lái)，提高人性化操作體驗(yàn)，如果您對(duì)jquery.fastLiveFilter.js插件的用法感興趣，這是個(gè)很不錯(cuò)的例子。

運(yùn)行效果截圖如下：

具體代碼如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery過(guò)濾器插件fastLiveFilter</title>
<script src="jquery-1.6.2.min.js"></script>
<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;
}
</script>
<script>
 $(function() {
 $('#search_input').fastLiveFilter('#search_list');
 });
</script>
<style type="text/css">
body { margin: 0px; background-color: #F6F6F6; }
.jq22{ width: 600px; height: 500px; margin-left: auto; margin-right: auto; background-color: #FFFFFF; padding: 10px; }
</style>
</head>
<body>
<div class="jq22">
<input id="search_input" placeholder="輸入文字開(kāi)始篩選">
<ul id="search_list">
 <li>One</li>
 <li>Two</li>
 <li>Three</li>
 <li>One</li>
 <li>awo</li>
 <li>bhree</li>
 <li>cne</li>
 <li>dwo</li>
 <li>ehree</li>
 <li>fne</li>
 <li>gwo</li>
 <li>hhree</li>
 <li>ihree</li>
</ul>
</div>
</body>
</html>

希望本文所述對(duì)大家的jquery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: