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 模式实例 观察者模式
Oct 24 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
在JavaScript中操作时间之setYear()方法的使用
Jun 12 Javascript
JS实现根据用户输入分钟进行倒计时功能
Nov 14 Javascript
bootstrap常用组件之头部导航实现代码
Apr 20 Javascript
vue判断input输入内容全是空格的方法
Mar 02 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
vue框架制作购物车小球动画效果实例代码
Sep 26 Javascript
ES5和ES6中类的区别总结
Dec 21 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代替JS玩转DOM的思路及示例代码
2014/06/15 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
基于jquery的地址栏射击游戏代码
2011/03/10 Javascript
解析Javascript中难以理解的11个问题
2013/12/09 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
如何使用vuejs实现更好的Form validation?
2017/04/07 Javascript
JQuery 封装 Ajax 常用方法(推荐)
2017/05/21 jQuery
vue实现通讯录功能
2018/07/14 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
详解使用uni-app开发微信小程序之登录模块
2019/05/09 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
es6数组includes()用法实例分析
2020/04/18 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
django框架自定义用户表操作示例
2018/08/07 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
Pandas之DataFrame对象的列和索引之间的转化
2019/06/25 Python
Django 路由控制的实现
2019/07/17 Python
Python基于正则表达式实现计算器功能
2020/07/13 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
HTML5 语义化结构化规范化
2008/10/17 HTML / CSS
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
俄罗斯最大的在线珠宝大卖场:Nebo
2019/12/08 全球购物
法律专业推荐信范文
2013/11/29 职场文书
2014年党支部工作总结
2014/11/13 职场文书
《詹天佑》教学反思
2016/02/20 职场文书