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程序设计有所帮助。
相关推荐
-
Angularjs中使用Filters详解
Filter作用就是接收一个输入,通过某个规则进行处理,然后给用户返回处理后的结果.Filter可以用在模板.控制器.或者服务,同时也会很容易自定义一个Filter过滤器. 在模板中使用Filter Filter可以用于在视图模板中使用一下语法表达式: {{ expression | filter }} 例如:格式{{ 12 | currency }}是使用currency的filter用法,让数字12过滤为货币形式,结果是$12.00. Filter可以应用到另一个过滤的结果中.这就是所谓的"
-
Angularjs中如何使用filterFilter函数过滤
AngularJS的filter,中文名"过滤器"是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东.AngularJS中有一个filterFilter函数用来对集合过滤,非常方便. 源代码大致如下: function filterFilter(){ return function(aray, expression comparator){ if(!isArray(array)) return array; var comparatorType = typeof(co
-
AngularJS中的过滤器filter用法完全解析
在AngularJS的世界里,filter提供了一种格式化数据的方法,Angular也提供给我们了很多内建的过滤器,并且建立自定义过滤器也是相当的简单 在HTML的模板绑定{{}}中,我们使用 | 来调用过滤器,比如,我们想让字符串全部大写字符显示: {{ name | uppercase }} 当然了,我们也可以在JavaScript中使用$filter服务来调用过滤器,还拿字符串大写来举例: app.controller('DemoController', ['$scope', '$filt
-
JavaScript 数组some()和filter()的用法及区别
some方法 array1.some(callbackfn[, thisArg]) 对数组array1中的每个元素调用回调函数callbackfn,当回调函数返回true或者遍历完所有数组后,some方法终止.可选参数thisArg可以替换回调函数中的this对象 filter方法 array1.filter(callbackfn[, thisArg]) 对数组array1中的每个元素调用回调函数callbackfn方法,该方法会返回一个在回调函数中返回true的元素的新的集合.可选参数this
-
详解AngularJS Filter（过滤器）用法
AngularJS的filter,中文名"过滤器"是用来过滤变量的值,或者格式化输出,得到自己所期望的结果或格式的东东. Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): {{ expression | filter }} Filter可以被链式使用(即连续使用多个filter): {{ expression | filter1 | filter2 | ... }} Filter也可以指定多个参数: {{ expr
-
Vue.js报错Failed to resolve filter问题的解决方法
之前使用vue.js写分页功能时,写了一个过滤器,发现一个比较奇怪的错误. console控制台调试的时候,提示错误消息: Failed to resolve filter: HomePage console错误信息.jpg 我原来的写法: 原来的错误写法.jpg 错误原因: 经过自己的摸索,后来发现竟然是代码顺序错误问题. 由于先执行的pageList,后执行的Vue的过滤方法,最终调整过的写法: 修改后的正确写法.jpg 作者:=金刚= 文章地址:http://www.cnblogs.com
-
浅析AngularJS Filter用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧 Filter简介 Filter是用来格式化数据用的. Filter的基本原型( '|' 类似于Linux中的管道模式): 复制代码 代码如下: {{ expression | filter }} Filter可以被链式
-
详解AngularJS中的filter过滤器用法
系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter.如果对smarty比较熟悉的话,学习angularjs会比较容易一点.这篇简单说一下angularjs的filter功能,angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的. 一,内置的过滤器 1,uppercase,lowercase大小转换 {{ "lower cap string" | uppercase }} //结果:
-
通过过滤器（Filter）解决JSP的Post和Request中文乱码问题
jsp代码: import javax.servlet.*; import javax.servlet.http.*; public class CharsetFilter implements Filter { public void destroy() { } public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) { try { HttpServletRequest
-
Javascript中关于Array.filter()的妙用详解
前言 和map类似,Array的filter也接收一个函数.但是和map不同的是, filter把传入的函数依次作用于每个元素,然后根据返回值是 true 还是false决定保留还是丢弃该元素. 实例介绍 例如,在一个Array中,删掉偶数,只保留奇数,可以这么写: var arr = [1, 2, 4, 5, 6, 9, 10, 15]; var r = arr.filter(function (x) { return x % 2 !== 0; }); r; // [1, 5, 9, 15]