自動入力 filtering_jquery を実装するための jquery.fastLiveFilter.js メソッド-jsチュートリアル-php.cn

自動入力 filtering_jquery を実装するための jquery.fastLiveFilter.js メソッド

WBOY

リリース： 2016-05-16 15:45:57

オリジナル

1270 人が閲覧しました

この記事の例では、jquery.fastLiveFilter.js が自動入力フィルタリングを実装する方法について説明します。皆さんの参考に共有してください。詳細は以下の通りです。

この効果は、jquery.fastLiveFilter.js プラグインを使用して実現されます。これは、検索ボックスの入力プロンプト機能に似ており、入力時に一致する項目の自動フィルタリング機能を実装します。 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 &#63; 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 &#63; 
    (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 プログラミング設計に役立つことを願っています。