公司产品的一个新功能中涉及到一个过滤器:通过关键字快速的对结果集进行过滤,获得比较少的结果,方便用户选择。在网上找了找,有很多jQuery的插件,要么就是auto complete, 要么就是没有高亮的quick search,都不是很适合我们的场景,于是就自己实现了一个。用起来倒是还过得去,呵呵。
效果图:
对一个List进行过滤(假设List很长,隐藏掉其他无关的项,例子里是美国的50个州,只搜索有"na"字符串的):
对一个table进行过滤(table的其他列不隐藏,只是高亮搜索到的):
当然,可以将其结合在一起,那样一个页面中可以有多个过滤器:
其实,实现起来,代码量很小,这里先大概说一下原理:
将搜索框中的字符收集起来,作为关键字,当搜索框中的内容发生变化时(keyup事件 ),做一次过滤,将匹配的内容高亮起来(如果有上一次的内容,需要做一个清空处理,比如第一次键入的是a,第二次键入的是al,则在al键入之后要将之前高亮的a恢复正常)。
主要用到了javascript的正则表达式,还有就是jQuery的强大的选择器,下边看看具体代码(demo附后下载):
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
function doFilter(contents, keyword, options){
-
var filterOptions = jQuery.extend({
-
keep : false,
-
reopts : "gi",
-
highlight : "#caff70"
- }, options);
-
-
if(!filterOptions.keep){contents.hide();}
-
contents.each(function(){
-
var text = $(this).text();
-
var pattern = new RegExp(keyword, filterOptions.reopts);
-
if(pattern.test(text)){
-
var item = text.replace(pattern, function(t){
-
return "<span style=\"background:"+filterOptions.highlight+"\">"+t+"</span>";
- });
-
$(this).html(item).show();
-
}else{
-
$(this).find("span").each(function(){
-
$(this).replaceWith($(this).text());
- })
- }
- });
- }
/**
* this is the do-filter function, used to filter the contents
*
* @params contents contents is the container of all items which
* need to filter, it's a jQuery object.
*
* @params keyword keyword is a string, used to be the condition
* of the filter
*
* @params options options is a JSON object, may contains:
* {
* keep : true or false to detemine whether keep the container or not,
* reopts : regular expression options, may be "g", "i", or "gi"
* }
*
*/
function doFilter(contents, keyword, options){
var filterOptions = jQuery.extend({
keep : false,
reopts : "gi",
highlight : "#caff70"
}, options);
if(!filterOptions.keep){contents.hide();}
contents.each(function(){
var text = $(this).text();
var pattern = new RegExp(keyword, filterOptions.reopts);
if(pattern.test(text)){
var item = text.replace(pattern, function(t){
return "<span style=\"background:"+filterOptions.highlight+"\">"+t+"</span>";
});
$(this).html(item).show();
}else{//clear search result of last
$(this).find("span").each(function(){
$(this).replaceWith($(this).text());
})
}
});
}
主要的选项可以定制,如过滤的规则(正则表达式的选项,全局? 忽略大小写?),高亮色彩的配置,以及是否保留源数据集的可视性。比如,List这种控件,一般是较长的时候进行一下搜索过滤,不需要保持源数据集,而table这种控件,则一般需要保持控件的结构,需要保持源数据集。
用法如下:
- var sb = $("#searchBox").val("").focus();
-
-
var resultSet = $("div#contentPanel div.item");
-
sb.keyup(function(){
-
var str = $(this).val();
- doFilter(resultSet, str);
- });
var sb = $("#searchBox").val("").focus();
var resultSet = $("div#contentPanel div.item");//used for restore
sb.keyup(function(){
var str = $(this).val();
doFilter(resultSet, str);
});
首先,将用作填写关键字的input获取到,然后取得数据集的list,包装成jQuery对象,将doFilter绑定到input的keyup事件上即可。
好了,大概也说明白了,自己也加深一下记忆,这一向在实现一套基于web的控件,基本的模型已经差不多了,过两天整理整理分享一下,呵呵。
按照bluemeteor的建议,将highlight参数改成更为通用的css class,用户同时可以将字体信息等传入作为highlight。总体效果如前文中的截图。代码更新如下:
- function doFilter(contents, keyword, options){
-
var filterOptions = jQuery.extend({
-
keep : false,
-
reopts : "gi",
-
highlight : "highlight"
- }, options);
-
-
if(!filterOptions.keep){contents.hide();}
-
contents.each(function(){
-
var text = $(this).text();
-
var pattern = new RegExp(keyword, filterOptions.reopts);
-
if(pattern.test(text)){
-
var item = text.replace(pattern, function(t){
-
return "<span class=\""+filterOptions.highlight+"\">"+t+"</span>";
- });
-
$(this).html(item).show();
-
}else{
-
$(this).find("span."+filterOptions.highlight).each(function(){
-
$(this).replaceWith($(this).text());
- })
- }
- });
- }
相关推荐
简单的JQuery表单过滤器演示,对初学者应该有帮组!
用jQuery实现Ajaxform表单提交! 实现过滤乱码! 解决乱码!
jQuery过滤器插件fastLiveFilter是一款简单实用的轻量级过滤器插件jquery.fastLiveFilter。
这是一款非常实用的jQuery内容过滤器插件。该内容过滤器插件可以通过多种方式来触发过滤条件:文本框、下拉框、单选按钮、多选按钮等。该插件集成了MixItUp,并使用css3来制作平滑滑动效果。
jquery基本过滤选择器举例、代码、html、可直接运行、学习jquery入门篇
前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+jQuery+实现烟花特效前端+...
jQuery详细学习资料。jQery过滤器文档。
jQuery选择器过滤器全面的总结,老师推荐!
jquery实现PDF在线预览 jquery实现在线预览PDF文档
jQuery过滤器图片浏览jquery图片浏览过滤特效切换
jQuery图片筛选过滤器插件是一款比较实用的图片过滤插件,支持分类,标题搜索,排序,移动效果等图片过滤方式。
用jQuery实现了搜索List子项内容过滤的功能.
一个不错的jQuery倒计时器 我在我的项目中用到了,非常不错
jQuery带过滤功能列表分类筛选插件代码
基于jquery实现的地址选择器,支持省、市、区、乡镇、社区5级联动(可自定义配置1-5级联动)
Jquery实现简单TodoList
使用jQuery实现的效果,主要是调用js实现一些特效,有兴趣可以学习。。
jquery ztree实现模糊查询功能,给树上的结点添加过滤器
jquery实现的等待加载页面 即实现更好的用户交互效果
Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮 Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮 Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮 Demo 用jQuery实现最简单的滚屏效果2(加了上下按钮 Demo 用...