집 > 기사 > 웹 프론트엔드 > 자동 입력 filtering_jquery를 구현하는 jquery.fastLiveFilter.js 메서드

자동 입력 filtering_jquery를 구현하는 jquery.fastLiveFilter.js 메서드

WBOY원래의: 2016-05-16 15:45:571258검색

이 문서의 예에서는 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 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：js는 php_javascript 기술의 strtotime() 및 date() 함수 구현 방법을 모방합니다.다음 기사：js는 php_javascript 기술의 strtotime() 및 date() 함수 구현 방법을 모방합니다.

자동 입력 filtering_jquery를 구현하는 jquery.fastLiveFilter.js 메서드

관련 기사