使用DWR实现搜索自动提示(一)

最近在公司实现了一个类似google suggest的功能，拿来和大家分享一下。主要使用javascipt + Dwr + spring +hibernate

使用Dwr当然是免不了要配置，先来看一下Dwr是如何把我们的service层（spring bean中的）方法 暴露给前端js的，它使得前端使用service就像使用javascript自定义的函数一样方便。

xml 代码

xml 代码

1. <dwr>  
2.     <allow>  
3.           
4.         <create creator="spring" javascript="DistrictLocationService">  
5.             <param name="beanName" value="districtLocationService" />  
6.               
7.             <include method="findAllByLocationRangeFor51ditu" />  
8.             <include method="findAllByKeywords" />  
9.         create>  
10. <convert converter="bean" match="com.goojia.dal.model.DistrictLocation">  
11.             <param name="include" value="id,districtName,avgPrice,address,houseCount,lng51,lat51">param>  
12.         convert>  
13. allow>  
14. dwr>  

 

java 代码

1. service 层查找方法   
2.   
3.   
4. /**  
5.      * 根据输入的关键字查询小区信息,最大返回MAX_DISTRICT条记录  
6.      * @param keywords  
7.      * @return  
8.      */  
9.     public List<districtlocationbo></districtlocationbo> findAllByKeywords(String keywords){   
10.  }  

 前面使用非常简单。只需要把生成的javascript导入 把componet组件放到你想放文本输入框的地方，并设置一下你想使用的样式，如果不传，将使用默认的样式  

<script type='text/javascript' src='<ww:url value="/dwr/interface/DistrictLocationService.js" includeParams="none" />'></script>
<script type='text/javascript' src='<ww:url value="/dwr/engine.js" includeParams="none" />'></script>
<script type="text/javascript" src="<ww:property value="picurl"/>js/prototype.js"></script>         
<script type="text/javascript" src="<ww:property value="picurl"/>js/autocomplete.js"></script>

html 代码

1. <ww:component  id="district" name="districtName" template="autocomplete">  
2.       <ww:param name="size">40ww:param>  
3.       <ww:param name="maxlength">30ww:param>  
4.       <ww:param name="dwrMethod">DistrictLocationService.findAllByKeywordsww:param>  
5.       <ww:param name="hiddenId">'districtId'ww:param>  
6.     ww:component>