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

運行效果截圖如下：

具體代碼如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery過濾器插件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="輸入文字開始篩選">
<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>

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

您可能感興趣的文章: