最近在公司实现了一个类似google suggest的功能,拿来和大家分享一下。主要使用javascipt + Dwr + spring +hibernate
使用Dwr当然是免不了要配置,先来看一下Dwr是如何把我们的service层(spring bean中的)方法 暴露给前端js的,它使得前端使用service就像使用javascript自定义的函数一样方便。
xml 代码
xml 代码
- <dwr>
- <allow>
- <create creator="spring" javascript="DistrictLocationService">
- <param name="beanName" value="districtLocationService" />
- <include method="findAllByLocationRangeFor51ditu" />
- <include method="findAllByKeywords" />
- create>
- <convert converter="bean" match="com.goojia.dal.model.DistrictLocation">
- <param name="include" value="id,districtName,avgPrice,address,houseCount,lng51,lat51">param>
- convert>
- allow>
- dwr>
java 代码
- service 层查找方法
- /**
- * 根据输入的关键字查询小区信息,最大返回MAX_DISTRICT条记录
- * @param keywords
- * @return
- */
- public List<districtlocationbo></districtlocationbo> findAllByKeywords(String keywords){
- }
前面使用非常简单。只需要把生成的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 代码
- <ww:component id="district" name="districtName" template="autocomplete">
- <ww:param name="size">40ww:param>
- <ww:param name="maxlength">30ww:param>
- <ww:param name="dwrMethod">DistrictLocationService.findAllByKeywordsww:param>
- <ww:param name="hiddenId">'districtId'ww:param>
- ww:component>