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>&nbsp;</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>