【转】JQuery UI AutoComplete 与 Strtus2 结合使用

http://www.cnblogs.com/dongliyang/archive/2013/01/20/2868699.html
这篇文章中完成一个搜索城市的示例程序，输入城市名称或者拼音首字母，返回城市的智能提示。使用了JQuery UI AutoComplete插件。

首先，看一下效果图，了解程序完成后是一个什么样子。

汉字搜索


拼音首字母搜索


看完了效果图，下面一步一步介绍如何完成这个程序。

Step 1 数据库表及函数(SQL Server 2008)
先来建立数据库表City，它包含两个字段CityID，CityName。


1 CREATE TABLE City
2 (
3 CityID INT IDENTITY(1,1) Primary KEY , --城市主键
4 CityName NVARCHAR(50) NOT NULL, --城市名称
5 ) 然后再插入一些示例数据


1 INSERT City(CityName) Values('北京市')
2 INSERT City(CityName) Values('天津市')
3 INSERT City(CityName) Values('上海市')
4 INSERT City(CityName) Values('重庆市')
5 INSERT City(CityName) Values('邯郸市')
6 INSERT City(CityName) Values('石家庄市')
7 INSERT City(CityName) Values('保定市')
8 INSERT City(CityName) Values('张家口市')
9 INSERT City(CityName) Values('承德市')
10 INSERT City(CityName) Values('唐山市')
11 //省略...从表结构及示例数据来看，这里没有城市名称拼音首字母字段，那如何完成拼音搜索呢？不要着急，这得在数据库中建立一个函数，用来返回汉字的拼音首字母。

返回汉字拼音首字母函数 f_GetPy [注1]


1 create function f_GetPy(@str nvarchar(4000))
2 returns nvarchar(4000)
3 as
4 begin
5 declare @strlen int,@re nvarchar(4000)
6 declare @t table(chr nchar(1) collate Chinese_PRC_CI_AS,letter nchar(1))
7 insert into @t(chr,letter)
8 select '吖', 'A ' union all select '八', 'B ' union all
9 select '嚓', 'C ' union all select '咑', 'D ' union all
10 select '妸', 'E ' union all select '发', 'F ' union all
11 select '旮', 'G ' union all select '铪', 'H ' union all
12 select '丌', 'J ' union all select '咔', 'K ' union all
13 select '垃', 'L ' union all select '嘸', 'M ' union all
14 select '拏', 'N ' union all select '噢', 'O ' union all
15 select '妑', 'P ' union all select '七', 'Q ' union all
16 select '呥', 'R ' union all select '仨', 'S ' union all
17 select '他', 'T ' union all select '屲', 'W ' union all
18 select '夕', 'X ' union all select '丫', 'Y ' union all
19 select '帀', 'Z '
20 select @strlen=len(@str),@re= ' '
21 while @strlen> 0
22 begin
23 select top 1 @re=letter+@re,@strlen=@strlen-1
24 from @t a where chr <=substring(@str,@strlen,1)
25 order by chr desc
26 if @@rowcount=0
27 select @re=substring(@str,@strlen,1)+@re,@strlen=@strlen-1
28 end
29 return(@re)
30 end如果调用f_GetPy('北京')，则返回拼音首字母 'bj'

Step 2 前端页面
前端页面非常简单，只需要一个输入框就可以了。这里使用的Struts2 html标签。当然，你也可以使用原生html标签。

1 <s:textfield name="cityName" id="cityName"></s:textfield>cityName的值提交到服务器，作为搜索关键字。为了实现Ajax智能提示，需要用到JQuery UI AutoComplete插件，它要求返回JSON格式的数据。所以，下一步就是要在Action中返回JSON数据。

Step 3 Action
CityAction接收搜索关键字，并返回JSON数据。


1 package com.dong.action;
2
3 import java.util.ArrayList;
4 import java.util.List;
5 import org.apache.struts2.json.annotations.JSON;
6 import com.dong.po.City;
7 import com.dong.service.ICityService;
8 import com.opensymphony.xwork2.ActionSupport;
9
10 /**
11 * 城市搜索Action
12 * @version 1.0 2013/01/12
13 * @author dongliyang
14 *
15 */
16 public class CityAction extends ActionSupport{
17
18 /** SerialVersionUID*/
19 private static final long serialVersionUID = -8042695641942800870L;
20 /** 城市Service */
21 private ICityService cityService;
22 /** 搜索关键字，城市名称 */
23 private String cityName;
24 /** 城市列表 */
25 private List<City> cityList;
26 /** 智能提示列表，以JSON数据格式返回 */
27 private List<String> autoSuggests = new ArrayList<String>();
28
29 /**
30 * 智能提示，自动补全功能
31 * @return String
32 */
33 public String autoComplete(){
34
35 cityList = cityService.findByName(cityName);
36
37 for(City city : cityList){
38 autoSuggests.add(city.getCityName());
39 }
40
41 return SUCCESS;
42 }
43
44 public void setCityService(ICityService cityService) {
45 this.cityService = cityService;
46 }
47
48 //搜索关键字不作为JSON数据返回，设置serialize=false
49 @JSON(serialize=false)
50 public String getCityName() {
51 return cityName;
52 }
53
54 public void setCityName(String cityName) {
55 this.cityName = cityName;
56 }
57
58 //搜索结果列表不作为JSON数据返回，设置serialize=false
59 @JSON(serialize=false)
60 public List<City> getCityList() {
61 return cityList;
62 }
63
64 public void setCityList(List<City> cityList) {
65 this.cityList = cityList;
66 }
67
68 //智能提示列表作为JSON数据返回，设置serialize=true
69 @JSON(serialize=true)
70 public List<String> getAutoSuggests() {
71 return autoSuggests;
72 }
73
74 public void setAutoSuggests(List<String> autoSuggests) {
75 this.autoSuggests = autoSuggests;
76 }
77 }CityAction中，cityName接收搜索关键字，不需要向页面返回数据，因此需要设置serialize=false，不进行序列化。

Action返回的JSON数据，格式是这样的 {"autoSuggests":["北京市","毕节地区","宝鸡市"]}

由于CityAction返回的是JSON数据，因此需要在struts.xml中进行一些特殊配置，Action所在包需要继承自json-default。

struts.xml配置文件


<package name="search" namespace="/search" extends="json-default">
<action name="cityAction" class="cityAction">
<result name="success" type="json"></result>
</action>
</package>CityAction依靠CityService返回城市列表，Service层没有什么可介绍的，只是简单调用了一下Dao层。重点看一下Dao层是如何实现搜索的。

CityDaoImpl


1 package com.dong.dao.impl;
2
3 import java.util.List;
4
5 import com.dong.dao.ICityDao;
6 import com.dong.framework.BaseDao;
7 import com.dong.po.City;
8
9 public class CityDaoImpl extends BaseDao<City> implements ICityDao {
10
11 /**
12 * 根据名称或拼音搜索城市
13 * @param cityName
14 * @return List<City> 城市列表
15 */
16 public List<City> findByName(String cityName){
17
18 String hql = "from City c where c.cityName like ? or dbo.f_GetPy(c.cityName) like ?";
19 return find(hql, "%" + cityName + "%",cityName + "%");
20
21 }
22
23 }hql语句中，使用cityName和f_GetPy(cityName) 来跟关键字进行like匹配。

比如：汉字搜索时，关键字"北京"传入方法，hql where子句中的c.cityName将能够匹配。

拼音搜索时，关键字"BJ"传入方法，hql where子句中的dbo.f_GetPy(c.cityName)将能够匹配。

特别说明：Hibernate有一些内置函数，比如max、min，Hibernate能够将这些函数转换成对应数据库的函数。当不能识别函数名时（本例中f_GetPy），将交给底层数据库来处理。

到现在为止，数据库已经能够正确返回JSON数据了。应该集成JQuery UI AutoComplete了。

Step 4 JQuery UI AutoComplete
Search.jsp页面如下


1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
2 <%@ taglib uri="/struts-tags" prefix="s" %>
3 <%
4 String path = request.getContextPath();
5 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
6 %>
7
8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
9 <html>
10 <head>
11 <base href="<%=basePath%>">
12 <title>城市搜索页</title>
13 <link rel="stylesheet" href="css/jquery-ui.css" />
14 <script type="text/javascript" src="js/jquery-1.8.3.js"></script>
15 <script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
16 <style type="text/css">
17 body { text-align:center;background:#efefef;}
18 h2 { color:#676463;}
19 #cityDiv { margin-right:auto;margin-left:auto;}
20 #cityName
21 {
22 font-family: Verdana,Arial,sans-serif;
23 font-size: 1.1em;
24 }
25 </style>
26 <script type="text/javascript">
27 $(function(){
28 $("#cityName").autocomplete({
29 minLength:1,
30 autoFocus:true,
31 source:function(request,response){
32 $.ajax({
33 type:"POST",
34 url:"search/cityAction!autoComplete.action",
35 dataType:"json",
36 data:{ cityName : $("#cityName").val() },
37 success:function(json){
38 response($.map(json.autoSuggests,function(item){
39 return {
40 label:item,
41 value:item
42 };
43 }));
44 }
45 });
46 }
47 });
48 });
49 </script>
50 </head>
51 <body>
52 <h2>JQuery UI AutoComplete + Struts2 智能提示</h2>
53 <div id="cityDiv">
54 <div id="noteDiv">
55 <img alt="where are you from?" src="images/searchMap.png">
56 </div>
57 <s:textfield name="cityName" id="cityName"></s:textfield>
58 </div>
59 </body>
60 </html>首先，引入css、js文件。

其次，在输入框元素上调用autocomplete方法。minLength指定文本框中有多少个字符时，发送请求。autoFocus：true，选中第一个匹配结果。source指定数据来源。JQuery UI Autocomplete插件需要返回带有label和value的对象。success函数的参数json是服务器端传过来的数据，比如是{"autoSuggests":["北京市","毕节地区","宝鸡市"]}，因此，使用$.map处理的时候，应该定位到json.autoSuggests。item就是"北京市"、"毕节地区"、"宝鸡市"。



结束：本示例使用了SSH + JQuery UI AutoComplete完成了智能提示效果，限于篇幅，Hibernate、Spring略去不提。下面提供了示例程序的下载，包括数据库脚本及可运行的程序。为了在你的机器上运行，请修改hibernate.properties文件，填写正确的数据库用户名及密码。

下载：百度网盘 （大小：17.97MB）

注1：获取汉字拼音首字母的函数，来自：http://www.cnblogs.com/wuhuacong/archive/2010/01/25/1655916.html。