【jQuery】JQuery-ui autocomplete与strtus2结合使用

　　汉字搜索效果图：

　　拼音首字母搜索效果图：

　　 1）数据库表及函数(SQL Server 2008)

　　先来建立数据库表City，它包含两个字段CityID，CityName。

CREATE TABLE City
 (
   CityID INT IDENTITY(1,1) Primary KEY ,  --城市主键
   CityName NVARCHAR(50)  NOT NULL,    --城市名称
 )

　　然后再插入一些示例数据

 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 //省略...
View Code

　　从表结构及示例数据来看，这里没有城市名称拼音首字母字段，那如何完成拼音搜索呢？不要着急，这得在数据库中建立一个函数，用来返回汉字的拼音首字母。

create   function  f_GetPy(@str   nvarchar(4000)) 
returns   nvarchar(4000) 
as 
begin 
declare   @strlen   int,@re   nvarchar(4000) 
declare   @t   table(chr   nchar(1)   collate   Chinese_PRC_CI_AS,letter   nchar(1)) 
insert   into   @t(chr,letter) 
    select   '吖', 'A '   union   all   select   '八', 'B '   union   all 
    select   '嚓', 'C '   union   all   select   '咑', 'D '   union   all 
    select   '妸', 'E '   union   all   select   '发', 'F '   union   all 
    select   '旮', 'G '   union   all   select   '铪', 'H '   union   all 
    select   '丌', 'J '   union   all   select   '咔', 'K '   union   all 
    select   '垃', 'L '   union   all   select   '嘸', 'M '   union   all 
    select   '拏', 'N '   union   all   select   '噢', 'O '   union   all 
    select   '妑', 'P '   union   all   select   '七', 'Q '   union   all 
    select   '呥', 'R '   union   all   select   '仨', 'S '   union   all 
    select   '他', 'T '   union   all   select   '屲', 'W '   union   all 
    select   '夕', 'X '   union   all   select   '丫', 'Y '   union   all 
    select   '帀', 'Z ' 
    select   @strlen=len(@str),@re= ' ' 
    while   @strlen> 0 
    begin 
        select   top   1   @re=letter+@re,@strlen=@strlen-1 
            from   @t   a   where   chr <=substring(@str,@strlen,1) 
            order   by   chr   desc 
        if   @@rowcount=0 
            select   @re=substring(@str,@strlen,1)+@re,@strlen=@strlen-1 
    end 
    return(@re) 
end

　　如果调用f_GetPy('北京')，则返回拼音首字母  'bj'

　　2）前台页面

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5 <link href="../js/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
 6  <style>
 7     .ui-autocomplete {
 8         max-height: 100px;
 9         overflow-y: auto;
10         /* prevent horizontal scrollbar */
11         overflow-x: hidden;
12     }
13     /* IE 6 doesn't support max-height
14      * we use height instead, but this forces the menu to always be this tall
15      */
16     * html .ui-autocomplete {
17         height: 100px;
18     }
19 </style>
20 <script type="text/javascript" src="../js/jquery-ui/jquery-1.9.0.min.js"></script>
21 <script type="text/javascript" src="../js/jquery-ui/jquery-ui.min.js"></script>        
22 <script type="text/javascript">
23         $( "#cityNameId" ).focus(function(){
24             //智能提示
25             $( "#cityNameId" ).autocomplete({
26                  source:function(request,response){
27                     $.ajax({
28                         type:"POST",
29                         url:"../cityManage/showTipsByCityName.action",
30                         dataType:"json",
31                         cache : false,
32                         async: false,
33                         data : {
34                             "cityName": $("#cityNameId").val(),
35                         },
36                         success:function(json){
37                             response($.map(json.autoSuggests,function(item){    
38                                 return {
39                                     label:item,
40                                     value:item
41                                 };
42                             }));
43                         }
44                     });
45                 }
46             });
47         });
48 </script>    
49 </head>
50 <body>
51 城市名称：
52 <div class="ui-widget" style="display:inline">
53 <input type ="text" id="cityNameId" name="cityName" >
54 </div>
55 </body>    
56 </html>
View Code

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

　　3)ACTION层

package com.dong.action;

import java.util.ArrayList;
import java.util.List;
import org.apache.struts2.json.annotations.JSON;
import com.dong.po.City;
import com.dong.service.ICityService;
import com.opensymphony.xwork2.ActionSupport;

/**
 * 城市搜索Action
 * @version 1.0 2013/01/12
 * @author dongliyang
 *
 */
public class CityAction extends ActionSupport{
    
    /** SerialVersionUID*/
    private static final long serialVersionUID = -8042695641942800870L;
    /** 城市Service */
    private ICityService cityService;
    /** 搜索关键字，城市名称 */
    private String cityName;
    /** 城市列表 */
    private List<City> cityList;
    /** 智能提示列表，以JSON数据格式返回 */
    private List<String> autoSuggests = new ArrayList<String>();
    
    /**
     * 智能提示，自动补全功能
     * @return String
     */
    public String autoComplete(){
    
        cityList = cityService.findByName(cityName);
        
        for(City city : cityList){
            autoSuggests.add(city.getCityName());
        }
        
        return SUCCESS;
    }
    
    public void setCityService(ICityService cityService) {
        this.cityService = cityService;
    }

    //搜索关键字不作为JSON数据返回，设置serialize=false
    @JSON(serialize=false)
    public String getCityName() {
        return cityName;
    }

    public void setCityName(String cityName) {
        this.cityName = cityName;
    }
    
    //搜索结果列表不作为JSON数据返回，设置serialize=false
    @JSON(serialize=false)
    public List<City> getCityList() {
        return cityList;
    }

    public void setCityList(List<City> cityList) {
        this.cityList = cityList;
    }
    
    //智能提示列表作为JSON数据返回，设置serialize=true
    @JSON(serialize=true)
    public List<String> getAutoSuggests() {
        return autoSuggests;
    }

    public void setAutoSuggests(List<String> autoSuggests) {
        this.autoSuggests = autoSuggests;
    }
}
View Code

　　4）DAO层

 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 }
View Code

　　hql语句中，使用cityName和f_GetPy(cityName) 来跟关键字进行like匹配。

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

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

　　5）struts.xml配置

 <package name="cityManage" namespace="/cityManage" extends="json-default">
 　　<action name="showTipsByCityName" class="cityAction" method="autoComplete">
   　　<result name="success" type="json"></result>
 　　</action>
 </package>

　　备注：

　　如果城市名称有重名的可能性，那么我们就要考虑在前台页面加上一个hidden存放与之对应的编码。在这种情况下，我们需要修改前台页面html，action层。

　　（1）首先我们需要把前台html的页面修改为：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5 <link href="../js/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
 6  <style>
 7     .ui-autocomplete {
 8         max-height: 100px;
 9         overflow-y: auto;
10         /* prevent horizontal scrollbar */
11         overflow-x: hidden;
12     }
13     /* IE 6 doesn't support max-height
14      * we use height instead, but this forces the menu to always be this tall
15      */
16     * html .ui-autocomplete {
17         height: 100px;
18     }
19 </style>
20 <script type="text/javascript" src="../js/jquery-ui/jquery-1.9.0.min.js"></script>
21 <script type="text/javascript" src="../js/jquery-ui/jquery-ui.min.js"></script>        
22 <script type="text/javascript">
23         $( "#cityNameId" ).focus(function(){
24             //智能提示
25             $( "#cityNameId" ).autocomplete({
26                  source:function(request,response){
27                     $.ajax({
28                         type:"POST",
29                         url:"../cityManage/showTipsByCityName.action",
30                         dataType:"json",
31                         cache : false,
32                         async: false,
33                         data : {
34                             "cityName": $("#cityNameId").val(),
35                         },
36                         success:function(json){
37                             response($.map(json.autoSuggests,function(item){    
38                                 return {
39                                     label:item.cityName,
40                                     value:item.cityName,
41                                     id:item.cityId
42                                 };
43                             }));
44                         }
45                     });
46                 },
47                 select:function( event, ui ) {
48                     $("#cityId").val(ui.item.id);
49                 }
50             });
51         });
52 </script>    
53 </head>
54 <body>
55 城市名称：
56 <div class="ui-widget" style="display:inline">
57 <input type ="text" id="cityNameId" name="cityName" />
58 <input type="hidden" id="cityCode" /> 
59 </div>
60 </body>    
61 </html>
View Code

　　（2）action层修改为：

 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     /** 智能提示列表，以JSON数据格式返回 */
25     private List<City> autoSuggests = new ArrayList<City>();
26     
27     /**
28      * 智能提示，自动补全功能
29      * @return String
30      */
31     public String autoComplete(){
32     
33         autoSuggests = cityService.findByName(cityName);
34         return SUCCESS;
35     }
36     
37     public void setCityService(ICityService cityService) {
38         this.cityService = cityService;
39     }
40 
41     //搜索关键字不作为JSON数据返回，设置serialize=false
42     @JSON(serialize=false)
43     public String getCityName() {
44         return cityName;
45     }
46 
47     public void setCityName(String cityName) {
48         this.cityName = cityName;
49     }
50     
51     //智能提示列表作为JSON数据返回，设置serialize=true
52     @JSON(serialize=true)
53     public List<City> getAutoSuggests() {
54         return autoSuggests;
55     }
56 
57     public void setAutoSuggests(List<City> autoSuggests) {
58         this.autoSuggests = autoSuggests;
59     }
60 }
View Code

　　

参考资料：

　　1.参考资料：http://www.cnblogs.com/dongliyang/archive/2013/01/20/2868699.html

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/ningvsban/p/3681484.html