jQuery实现模糊查询

今天做了一个类似从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');