今天做了一个类似从QQ群组选出成员的功能,要求能对群里面已有的成员实现模糊查询,但是后台接口不支持模糊查询,所以干脆在前台进行模糊查询,让能匹配到的群组成员显示,不能匹配的成员进行隐藏来达到模糊查询的效果。
下面是我的代码:
// 模糊搜索
function query(){
if($.trim($("#queryCondition").val()).length == 0){
$(".unchoice_li").show();
}else{
$(".unchoice_li")
.hide()
.filter(":contains('"+$("#queryCondition").val()+"')")
.show();
}
}
如果查询条件不为空,首先让全部成员不可见,再过滤出匹配的成员并让其显示出来。
下面是jQuery官网截出来的,解释的很清楚。
一、filter()方法:filter() 方法将匹配元素集合缩减为匹配指定选择器的元素
$('li').filter(':even').css('background-color', 'red');此调用的结果是将项目 1, 3, 5 的背景设置为红色,这是因为它们都匹配选择器(回忆一下,:even 和 :odd 均使用基于 0 的 index)。
使用过滤函数
使用该方法的第二个形式是,通过函数而不是选择器来筛选元素。对于每个元素,如果该函数返回 true,则元素会被包含在已筛选集合中;否则,会排除这个元素。
请看下面这段稍显复杂的 HTML 片段:
<ul> <li><strong>list</strong> item 1 - one strong tag</li> <li><strong>list</strong> item <strong>2</strong> - two <span>strong tags</span></li> <li>list item 3</li> <li>list item 4</li> <li>list item 5</li> <li>list item 6</li> </ul>
我们可以选取这些列表项,然后基于其内容来筛选它们:
$('li').filter(function(index) { return $('strong', this).length == 1; }).css('background-color', 'red');