SSH2+DWR 实践 - 自动完成

本文介绍了一个利用Direct Web Remoting (DWR) 和 jQuery 实现自动完成功能的例子。具体步骤包括配置SSH2、DWR2.0及jQuery AutoComplete组件,并通过Spring管理的UserService类提供数据支持。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


需求:根据输入的用户名前缀获得自动完成的列表


1.确保SSH2能跑起来

2.确保DWR2.0能跑起来

3.jquery autocomplete能跑起来


4.

User服务类:


@Component("userService")
public class UserService

 

	/**
	 * 根据用户名获得匹配
	 */
	public List<User> getMatchByPrefix(String prefixUsername) {
		List<User> retVal=null;
		try {
			retVal=userDao.findByLikeUsername(prefixUsername);
		} catch (Exception e) {
			logger.debug("根据username={}获得User出错", prefixUsername, e);
		}
		return retVal;
	}
 

 

5.dwr.xml

 

<dwr>
	<allow>
	  <create creator="spring" javascript="userService">
		<!--Spring中托管的bean名字-->
	    <param name="beanName" value="userService"/>
		<!--方法白名单-->
	    <include method="getMatchByPrefix" />
	  </create>
	<!--类型转换器-->
	<convert converter="hibernate3" match="com.mtea.erp.bean.User">
		<!--属性白名单-->
		<param name="include" value="username" />
	</convert>
	</allow>
</dwr>
 

web.xml


<!--dwr-->
	<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
		<init-param>
			<param-name>debug</param-name>
			<param-value>true</param-value>
		</init-param>
		<init-param>
			<param-name>logLevel</param-name>
			<param-value>debug</param-value>
		</init-param>
	</servlet>

	<servlet-mapping>
		<servlet-name>dwr-invoker</servlet-name>
		<url-pattern>/dwr/*</url-pattern>
	</servlet-mapping>
	
	<!--Struts2 Filter-->
	<filter>
		<filter-name>struts2</filter-name>
		<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class>
	</filter>

	<filter-mapping>
		<filter-name>struts2</filter-name>
		<url-pattern>/page/*</url-pattern>
	</filter-mapping>
  



6.page


用户名:<input type="text" id="username" name="user.username" value="<s:property value="user.username" />"/>


7.script:

<!-- jquery&ui core lib -->
<script type="text/javascript" src="/js/jquery/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-ui-1.8.12.custom.min.js"></script>

<!-- dwr -->
<script type="text/javascript" src="/dwr/engine.js"></script>
<script type="text/javascript" src="/dwr/util.js"></script>

<script type='text/javascript' src='/dwr/interface/userService.js'></script>

 

<script type="text/javascript">
			$(document).ready(function(){ 
				//文本框不缓存
				$.fn.mtea.setInputTxtCache(["#username"],false);
				
				$("#username").keyup(function(){
					userService.getMatchByPrefix($(this).val(),function(result){
						//遍历,组装结果
						var usernameArray=[];
						$.each(result,function(i){
							usernameArray.push(result[i].username);
							//$("#result").append(result[i].username+"-");  
						});

						//自动完成
						$("#username").autocomplete({
							/*
							问题:
							->dwr.util.toDescriptiveString(result, 2) 如何使用?
							->$符号的冲突股
							->source: result,没有效果
							*/
							source: usernameArray
						});
					});
				});
			});
		</script>
 

 

8.test dwr:




9.最终效果:

 


 

 

10.问题


a.
若出现:

2011-4-30 12:10:05 org.directwebremoting.util.CommonsLoggingOutput error
严重: No converter found for 'com.mtea.erp.bean.User'

则:

    <!--类型转换器-->
    <convert converter="bean" match="com.mtea.erp.bean.User">
        <param name="include" value="username" />
    </convert>



b.若出现关于hibernate的问题

则:

不再是converter="bean",而是converter="hibernate3"



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值