日期:2014-05-16 浏览次数:20322 次
聊天的时候,要是好友太多了,查找起来很不容易。这时候,放置一个用户搜索区域,是非常必要的。实现这个功能,用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>