cari

Rumah >hujung hadapan web >tutorial js >kaedah jquery.fastLiveFilter.js untuk melaksanakan penapisan_jquery input automatik

kaedah jquery.fastLiveFilter.js untuk melaksanakan penapisan_jquery input automatik

WBOY
WBOYasal
2016-05-16 15:45:571282semak imbas

Contoh dalam artikel ini menerangkan cara jquery.fastLiveFilter.js melaksanakan penapisan input automatik. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kesan ini dicapai menggunakan pemalam jquery.fastLiveFilter.js Ia serupa dengan fungsi gesaan input pada kotak carian dan melaksanakan fungsi penapisan automatik bagi item yang sepadan dengan bijak berdasarkan aksara yang dimasukkan. Kandungan disenaraikan secara automatik untuk meningkatkan pengalaman operasi yang dimanusiakan Jika anda berminat dengan penggunaan pemalam jquery.fastLiveFilter.js, ini adalah contoh yang sangat baik.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Kod khusus adalah seperti berikut: 

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js meniru kaedah pelaksanaan fungsi strtotime() dan date() dalam kemahiran php_javascriptArtikel seterusnya：js meniru kaedah pelaksanaan fungsi strtotime() dan date() dalam kemahiran php_javascript

Artikel berkaitan

Lihat lagi