ajax(DWR框架)实现简单的内容自动补全

以下为服务器端类：

public class UserCheck {

/**
* 自动补全
*/
public List getList(String key){
String hql = " select user.uname from TblUser as user where user.uname like'"+key+"%'";
Session session = HibernateSessionFactory.getSession();
Query query = session.createQuery(hql);
List list = query.list();
System.out.println("========listSize:"+list.size());
return list;
}
}

以下为页面中使用的js：

<!-- dwr/路径和web.xml映射路径对应 -->
<script type='text/javascript' src='dwr/interface/JUserCheck.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
<script type='text/javascript' src='dwr/util.js'></script>

<script type="text/javascript">
var widthDiv;
function showUser(obj){

widthDiv = obj.offsetWidth;//文本框的宽度，层随此宽度
var uname = obj.value;
JUserChecker.getList(uname,innerContext);

}
//自动补全
function innerContext(args){
var content = "<table width=100%>";
for(var i in args){
content+="<tr width=\"100%\" οnmοuseοver=\"this.style.background='#CCCCCC'\" οnmοuseοut=\"this.style.background=''\">";
content+="<td οnclick='sel(this)' style='cursor:hand'>";//添加点击事件和手形样式
content+=args[i];//内容
content+="</td></tr>";
}
content += "</table>";
document.getElementById("showUser").style.display="block";//显示层
document.getElementById("showUser").style.width=widthDiv;//设定层的宽度和文本框同宽
document.getElementById("showUser").innerHTML=content;
}
function sel(obj){
document.getElementById("item.uname").value=obj.innerHTML;//把点击选中的内容赋值给文本框
document.getElementById("showUser").style.display="none";//层隐藏
}
</script>



页面主要代码如下：

<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>用户注册：</td>
<td> </td>
</tr>
<tr>
<td colspan="2"><hr/></td>
</tr>
<tr>
<td>自动补全：</td>
<td><input name="item.uname" οnkeyup="showUser(this)" autocomplete = "off" />
</td>
<tr><td></td><td valign="top">
<div style="border:1px; width:150px;background-color:#999999;position:absolute;z-index:2;overflow:scroll;" id="showUser"></div>
</td>

</table>