聊天的时候,要是好友太多了,查找起来很不容易。这时候,放置一个用户搜索区域,是非常必要的。实现这个功能,用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;
}
需要注意的是,用户显示区需按照指定id和class标注
<tr height="3%">
<td colspan="2"><input type="text" id="querybox"
value="输入账号,姓名等进行查询" title="输入账号,姓名等进行查询"
style="width:100%;color: gray" οnfοcus="clearText(this)"
οnblur="renewText()" οnkeyup="goSearch(this.value)">
</td>
</tr>
<div id="userSearchArea">
<div id="d1" class="bs" style="display: block; ">
<a href="#" οnclick="return userClicked(this,'JS_ImTest');">
JS_ImTest<br> </a>
</div>
<div id="d2" class="bs" style="display: block; ">
<a href="#" οnclick="return userClicked(this,'JS_ImTestPwd');">
JS_ImTestPwd<br> </a>
</div>
<div id="d3" class="bs" style="display: none; ">
<a href="#" οnclick="return userClicked(this,'3333');" class="rosterUserSelected">
3333<br> </a>
</div>
<div id="d4" class="bs" style="display: block; ">
<a href="#" οnclick="return userClicked(this,'system');">
system<br> </a>
</div>
<div id="d5" class="bs" style="display: block; ">
<a href="#" οnclick="return userClicked(this,'test@jointsky');">
test<br> </a>
</div>
</div>