jquery.fastLiveFilter.js-Methode zur Implementierung der automatischen Eingabefilterung

jquery.fastLiveFilter.js-Methode zur Implementierung der automatischen Eingabefilterung_jquery

WBOY

Freigeben： 2016-05-16 15:45:57

Original

1288 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie jquery.fastLiveFilter.js die automatische Eingabefilterung implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dieser Effekt wird mit dem Plug-in jquery.fastLiveFilter.js erreicht. Es ähnelt der Eingabeaufforderungsfunktion des Suchfelds und implementiert die automatische Filterfunktion passender Elemente Basierend auf den eingegebenen Zeichen wird der Inhalt automatisch aufgelistet, um die humanisierte Bedienung zu verbessern. Wenn Sie an der Verwendung des Plug-Ins jquery.fastLiveFilter.js interessiert sind, ist dies ein sehr gutes Beispiel.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Der spezifische Code lautet wie folgt:

<!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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.