聊天的时候，要是好友太多了，查找起来很不容易。这时候，放置一个用户搜索区域，是非常必要的。实现这个功能，用js写上几行即可搞定。。。

如图一：

点击搜索区，输入查询内容，即可查询符合需求的用户列表

如图二：

源码如下：

//search user dml@ 2012.9.19
	function goSearch(s) {
		if (s == '') {
			document.getElementById('userSearchArea').style.display = 'none';
			return;
		}
		var o;
		var ss;
		var iLen = 5;
		for (i = 0; i < iLen; i++) {
			o = document.getElementById("d" + (i + 1));
			ss = innerText(o);
			if (ss.indexOf(s) != -1) {
				o.style.display = "block";
			} else {
				o.style.display = "none";
			}
		}
		document.getElementById('userSearchArea').style.display = '';
	}
	//document.all 只能在IE或IE内核的浏览器有效
	function innerText(o) {
		return document.all ? o.innerText : o.textContent;
	}

<tr height="3%">
			<td colspan="2"><input type="text" id="querybox"
				value="输入账号，姓名等进行查询" title="输入账号，姓名等进行查询"
				style="width:100%;color: gray" onfocus="clearText(this)"
				onblur="renewText()" onkeyup="goSearch(this.value)">
			</td>
	</tr>
<div id="userSearchArea">
					

					<div id="d1" class="bs" style="display: block; ">
						<a href="#" onclick="return userClicked(this,'JS_ImTest');">
							JS_ImTest<br> </a>
					</div>
					

					<div id="d2" class="bs" style="display: block; ">
						<a href="#" onclick="return userClicked(this,'JS_ImTestPwd');">
							JS_ImTestPwd<br> </a>
					</div>
					

					<div id="d3" class="bs" style="display: none; ">
						<a href="#" onclick="return userClicked(this,'3333');" class="rosterUserSelected">
							3333<br> </a>
					</div>
					

					<div id="d4" class="bs" style="display: block; ">
						<a href="#" onclick="return userClicked(this,'system');">
							system<br> </a>
					</div>
					

					<div id="d5" class="bs" style="display: block; ">
						<a href="#" onclick="return userClicked(this,'test@jointsky');">
							test<br> </a>
					</div>
					
				</div>