jquery.fastLiveFilter.js实现输入自动过滤的方法

前端技术 2023/09/04 JavaScript

本文实例讲述了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 ? 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 ? 
    (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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/9982

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案