过滤器(Filter)的实现(jQuery)

公司产品的一个新功能中涉及到一个过滤器：通过关键字快速的对结果集进行过滤，获得比较少的结果，方便用户选择。在网上找了找，有很多jQuery的插件，要么就是auto complete, 要么就是没有高亮的quick search,都不是很适合我们的场景，于是就自己实现了一个。用起来倒是还过得去，呵呵。

 

效果图：

对一个List进行过滤(假设List很长，隐藏掉其他无关的项，例子里是美国的50个州，只搜索有"na"字符串的)：

 对一个table进行过滤(table的其他列不隐藏，只是高亮搜索到的)：

 当然，可以将其结合在一起，那样一个页面中可以有多个过滤器：

其实，实现起来，代码量很小，这里先大概说一下原理：

将搜索框中的字符收集起来，作为关键字，当搜索框中的内容发生变化时(keyup事件 )，做一次过滤，将匹配的内容高亮起来(如果有上一次的内容，需要做一个清空处理，比如第一次键入的是a，第二次键入的是al，则在al键入之后要将之前高亮的a恢复正常)。

 

主要用到了javascript的正则表达式，还有就是jQuery的强大的选择器，下边看看具体代码(demo附后下载)：

/**
 * 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");//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{//clear search result of last
			$(this).find("span."+filterOptions.highlight).each(function(){
				$(this).replaceWith($(this).text());
			})
		}
	});
}

 

评论

20 楼 abruzzi 2010-04-26  

zhangjf108 写道

看起来相当强大!

呵呵，看到你的回复我才想起来还有这么一篇文章呢，现在这个Filter使用了Base,做成了面向对象的了(主要是一个产品里用到了这个过滤器，而且多处引用，做成OO的方便一些)，等“JavaScript内核系列”出完了再整理下，作为续篇。

19 楼 zhangjf108 2010-04-26  

看起来相当强大!

18 楼 abruzzi 2009-11-27  

childrentown 写道

lzyzizi 写道

抱歉，按收藏的时候按错了下隐藏贴，~~心有愧 贴别来支持下楼主

呵呵，不用客气。主要目的是分享下实际项目中用到的技术，能做到对别有有用我就很高兴了。

to lzyzizi:
不好意思，chrome上的帐号(childrentown)是上次同事登录后留下的，我一般用ff,不小心用他的账号回复了，

17 楼 childrentown 2009-11-27  

lzyzizi 写道

抱歉，按收藏的时候按错了下隐藏贴，~~心有愧 贴别来支持下楼主

呵呵，不用客气。主要目的是分享下实际项目中用到的技术，能做到对别有有用我就很高兴了。

16 楼 horseroad 2009-11-27  

abruzzi 写道

horseroad 写道

个人水平有限，js、jquery仅限于会用，不过东东很好，收藏了！但是代码没看太懂。不知道怎么才能搞懂呢？

这个实现其实不复杂，可以分成这样几步：

1.保存原始列表，以备恢复。
2.将原始列表中的所有Item遍历，用正则表达式进行匹配，匹配的高亮
3.注册这个过程到searchbox的keyup时间上

仅此而已，实现上用的是jQuery,所以代码量很小。

呵呵，非常感谢耐心解析，后来我又仔细看了一遍代码，也看懂了没个语句具体干些什么，现在看你这么一个解析更加清楚了～再次感谢

15 楼 lzyzizi 2009-11-27  

抱歉，按收藏的时候按错了下隐藏贴，~~心有愧 贴别来支持下楼主

14 楼 abruzzi 2009-11-25  

a3mao 写道

呵呵 这样的插件有很多，我就用过一个：autocomplete.js 这个也很好用的

不一样撒，
autocomplete是对一个外部的内容区(内容一般在服务端)进行过滤，并最终"完成"一个InputFileld。
Filter则是对一个内容区(一般在页面上)进行过滤，最终用户要的是过滤后的内容区!

也可以看成这样，autocomplete是给inputfield附加上一个内容区，而filter则是给一个内容区附加一个inputfield。两者正好相反，呵呵。

13 楼 a3mao 2009-11-24  

呵呵 这样的插件有很多，我就用过一个：autocomplete.js 这个也很好用的

12 楼 admyefei 2009-11-23  

大家在google搜“在线输入法”，有一个用javascript实现的输入法，速度很快，本人技术浅薄，不知道如何实现的。觉着和这个帖子的filter有点相似，而且本人正想做一个1000多条记录的字典，不知道怎么才能用javascript实现。

11 楼 admyefei 2009-11-23  

childrentown 写道

admyefei 写道

我怎么感觉很卡，性能有问题

我用这个JFilter在FF和IE下都测了下(100条数据)，没有感觉卡啊，你用的是什么浏览器？不过如果输入速度很快的话，好像是有些卡哦。

可能是我输入的快了些，不过相比我在输入法中输入的速度应该差不多，但是输入法就反应迅速多了。
没个人的体验还是不一样。

10 楼 abruzzi 2009-11-23  

horseroad 写道

个人水平有限，js、jquery仅限于会用，不过东东很好，收藏了！但是代码没看太懂。不知道怎么才能搞懂呢？

这个实现其实不复杂，可以分成这样几步：

1.保存原始列表，以备恢复。
2.将原始列表中的所有Item遍历，用正则表达式进行匹配，匹配的高亮
3.注册这个过程到searchbox的keyup时间上

仅此而已，实现上用的是jQuery,所以代码量很小。

9 楼 horseroad 2009-11-23  

个人水平有限，js、jquery仅限于会用，不过东东很好，收藏了！但是代码没看太懂。不知道怎么才能搞懂呢？

8 楼 childrentown 2009-11-23  

admyefei 写道

我怎么感觉很卡，性能有问题

我用这个JFilter在FF和IE下都测了下(100条数据)，没有感觉卡啊，你用的是什么浏览器？不过如果输入速度很快的话，好像是有些卡哦。

7 楼 admyefei 2009-11-22  

个人觉得javascript只是ria过渡时期的选择。想这么简单个FILTER，才50个州，都有严重的性能问题。

6 楼 admyefei 2009-11-22  

我怎么感觉很卡，性能有问题

5 楼 whaosoft 2009-11-20  

呃 lz做的不错呢 呵呵 前天我正在看lucene的高亮功能了 感觉不喜欢

4 楼 abruzzi 2009-11-18  

代码根据bluemeteor兄的建议做了一点修改，可以下载JFilter2.zip做测试，再次感谢bluemeteor，也希望有更多的意见，呵呵。

3 楼 abruzzi 2009-11-18  

bluemeteor 写道

有小建议，说出来讨论一下.XD

高亮的部分是否可以通过class来控制？

return "<span class='filterHighLight'>"+t+"</span>";

这样做可以，第一，通过外部的样式表来定义默认颜色，同时可以扩展，不仅控制背景，还可以很方便得扩展为控制字体。第二，将$(this).find("span").each替换成$(this).find(".filterHighLight").each，这样可以获得更大的应用性，现在这种方式如果元素本身在filter之前就包含span元素的话就会出现问题了

呵呵，这两点都提的非常好。关于第一点，我开始也写的是用css的class做Options，后来觉得用的时候有的人可能不习惯使用class,就写成color了，我觉得class更标准一些，下来改一下。第二点非常之正确，按照你说的这种方式可以消除潜在的bug.

谢谢了！

2 楼 bluemeteor 2009-11-18  

有小建议，说出来讨论一下.XD

高亮的部分是否可以通过class来控制？

return "<span class='filterHighLight'>"+t+"</span>";

这样做可以，第一，通过外部的样式表来定义默认颜色，同时可以扩展，不仅控制背景，还可以很方便得扩展为控制字体。第二，将$(this).find("span").each替换成$(this).find(".filterHighLight").each，这样可以获得更大的应用性，现在这种方式如果元素本身在filter之前就包含span元素的话就会出现问题了

1 楼 childrentown 2009-11-18  

看着不错，以前做过个类似的东西，IE好像有backspace的bug(keyup事件无效)，不过例子中这个没有问题，也没看见有对IE的特殊处理，^_^?