公司产品的一个新功能中涉及到一个过滤器：通过关键字快速的对结果集进行过滤，获得比较少的结果，方便用户选择。在网上找了找，有很多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());
})
}
});
}
- 大小: 9.3 KB
- 大小: 5.6 KB
- 大小: 3.5 KB
分享到：
相关推荐
本示例“Jquery即时页面刷新过滤器”旨在展示如何利用jQuery实现在表格中进行实时搜索过滤，提高用户体验。这个功能常见于数据量较大，需要用户快速查找特定信息的场景。 首先，我们需要理解jQuery的选择器。选择器...
在本项目中，"jQuery过滤器图片浏览.rar_average91i_jQuery过滤器图片浏览" 提供了一个使用jQuery实现的图片浏览和过滤效果。这个功能主要用于网页中的图像展示，允许用户根据特定条件筛选和切换图片，提升用户体验...
本篇文章将深入探讨如何利用jQuery ZTree实现模糊查询功能，并对树上的节点添加过滤器。 首先，我们要理解jQuery ZTree的核心特性之一是其强大的数据管理能力。通过配置数据参数，我们可以定制树的展示方式，包括...
"jQuery Multiselect Filter"是基于jQuery库的一个扩展，主要功能是在多选下拉框中添加实时搜索过滤功能。通过在下拉框上方添加一个输入框，用户可以输入关键词，快速找到并选择目标选项，极大地提高了操作效率。 2...
在"jQuery过滤器图片浏览"项目中，我们关注的是如何利用jQuery来实现图片的筛选和展示功能，使用户能够更方便地浏览和管理大量的图片资源。 在jQuery中，过滤器是一种强大的工具，可以用来选取满足特定条件的DOM...
在本文中，我们将深入探讨如何使用jQuery实现一个类似于京东商品的多条件过滤功能。这个功能允许用户根据多个筛选条件快速定位到他们感兴趣的商品，提高用户体验并优化网站的交互设计。 首先，我们需要理解jQuery的...
本文将深入探讨基于jQuery的图片筛选过滤器插件的实现原理与源码分析。 首先，jQuery库的核心在于其选择器机制，它简化了DOM元素的选择和操作。在图片筛选过滤器中，我们通常会利用类选择器、ID选择器或者数据属性...
本主题聚焦于"jQuery实现的搜索列表过滤"，这是一种常见且实用的功能，尤其适用于数据展示和用户交互丰富的Web应用。 首先，我们要理解搜索列表过滤的基本原理。在网页中，当用户在搜索框输入关键词时，页面上的...
本教程将深入讲解基于jQuery实现的带过滤功能的列表分类筛选插件，帮助开发者实现高效的数据展示和用户交互。** **一、jQuery基础知识** 在深入讨论jQuery列表筛选插件之前，我们需要了解jQuery的基本用法。jQuery...
"jQuery选项卡切换过滤器帅选图片浏览"是一个利用jQuery实现的功能，通常用于创建交互式和动态的网页内容展示，特别是在图片浏览场景中。这个功能结合了选项卡切换和过滤器的概念，使用户能够更方便地浏览和筛选图片...
3. **启用过滤器**：通过设置配置项 `filter` 为 `true` 或者使用 `$("table").tablesorter({ widgets: ['filter'] })` 启用过滤器。 4. **添加搜索框**：在表格上方添加输入框，通过事件监听实现搜索功能。 5. **...
jQuery筛选列表过滤插件Filterizr是一款强大的前端工具，主要用于实现动态筛选和排序列表项，尤其适用于展示项目集合或产品目录的网页。它以其简洁的API和丰富的自定义选项，为开发者提供了灵活且高效的解决方案。 ...
选择器用于指定目标元素，而过滤器则进一步细化选择结果，通常用于从已选元素中筛选出符合特定条件的子集。两者可以灵活组合，形成复杂的选择表达式，满足多样化的DOM操作需求。 #### 三、基础选择器详解 1. **#id...
通过`org.htmlparser.Parser`库，我们可以实现对HTML文档的解析，并利用自定义的过滤器来模拟jQuery选择器的功能。然而，由于JavaScript和Java在处理DOM上的本质差异，完全复制jQuery的功能可能会较为复杂，因此在...
在这个“jquery分类搜索框带过滤器的搜索框”项目中，我们主要探讨如何利用jQuery实现一个具有高级功能的搜索框，包括分类筛选和动态过滤。 首先，jQuery 提供的事件监听功能在这里起着关键作用。在描述中提到，当...
这个方法可以接受多种参数类型，包括CSS选择器、函数或者元素对象，以实现不同的过滤需求。现在我们来详细解析这个强大的功能。 首先，让我们理解基本的CSS选择器过滤。假设你有一个包含多个li元素的ul列表，你可以...
标题中的“jsp实现下载excel,word,pdf,jpg,gif,xml,js过滤器实现文档.pdf”描述了一种使用JavaServer Pages（JSP）技术来处理文件下载的方法，特别是针对Excel、Word、PDF、JPEG、GIF、XML和JS等不同类型的文件。...
在“jQuery实现查询增加”的主题中，我们将深入探讨如何利用jQuery来构建动态的数据查询和添加功能。 一、jQuery基础 jQuery的核心在于它的选择器语法，它借鉴了CSS的规则，使得选取DOM元素变得异常简单。例如，`$...
`Datagrid-filter`插件则进一步增强了Grid的功能，通过添加过滤器，使用户可以根据预定义或自定义的条件对数据进行筛选，减少了手动查找特定信息的时间。 在实际应用中，`Datagrid-filter`插件的使用非常简单。`...
在压缩包“day42-Live User Filter（实时用户过滤器）”中，可能包含了实现这个功能的HTML、CSS和JavaScript代码示例，通过学习和分析这些代码，你可以更深入地理解如何将这三个技术结合起来创建实时用户过滤器。...