suchen

Heim >Web-Frontend >js-Tutorial >jquery.fastLiveFilter.js-Methode zur Implementierung der automatischen Eingabefilterung_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:45:571300Durchsuche

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js imitiert die Implementierungsmethode der Funktionen strtotime() und date() in php_javascript-KenntnissenNächster Artikel：js imitiert die Implementierungsmethode der Funktionen strtotime() und date() in php_javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen