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


Posted in Javascript onAugust 11, 2015

本文实例讲述了jquery.fastLiveFilter.js实现输入自动过滤的方法。分享给大家供大家参考。具体如下:

本效果是使用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程序设计有所帮助。

Javascript 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
基于JQuery的密码强度验证代码
Mar 01 Javascript
Jquery操作js数组及对象示例代码
May 11 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
微信小程序 前端源码逻辑和工作流详解
Oct 08 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
详解Angular操作cookies方法
Jun 01 Javascript
bootstrap table.js动态填充单元格数据的多种方法
Jul 18 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
javascript实现五星评价代码(源码下载)
Aug 11 #Javascript
jQuery的remove()方法使用详解
Aug 11 #Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 #Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 #Javascript
jQuery右下角旋转环状菜单特效代码
Aug 10 #Javascript
jquery实现滑动特效代码
Aug 10 #Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
Aug 10 #Javascript
You might like
PHP编程之高级技巧——利用Mysql函数
2006/10/09 PHP
使用新浪微博API的OAuth认证发布微博实例
2015/03/27 PHP
PHP简单日历实现方法
2016/07/20 PHP
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
jquery中animate的stop()方法作用实例分析
2015/01/30 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
Jquery插件仿百度搜索关键字自动匹配功能
2016/05/11 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
2017/06/22 Javascript
js实现鼠标移动到图片产生遮罩效果
2017/10/21 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[02:12]2015国际邀请赛 SHOWOPEN
2015/08/05 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python ORM框架SQLAlchemy学习笔记之映射类使用实例和Session会话介绍
2014/06/10 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
python地震数据可视化详解
2019/06/18 Python
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
致跳高运动员加油稿
2014/02/12 职场文书
企业承诺书怎么写
2014/05/24 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
2014年教师业务工作总结
2014/12/19 职场文书
2015年母亲节活动策划方案
2015/05/04 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
Matplotlib绘制条形图的方法你知道吗
2022/03/21 Python