DWR实现简单的内容自动补全
ajax(DWR框架)实现简单的内容自动补全
dwr.xml中的配置：
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">
<dwr>
<allow>
<create creator="new" javascript="JUserChecker">
<param name="class" value="com.biz.UserCheck" />
<include method="check" />
<include method="test" />
<include method="getList" />
<include method="test1" />
</create>
<convert converter="bean" match="com.entity.TblUser" />
</allow>
</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%" onmouseover="this.style.background='#CCCCCC'" onmouseout="this.style.background=''">";
content+="<td onclick='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" onkeyup="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>
