【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, --城市名称
)
然后再插入一些示例数据
INSERT City(CityName) Values('北京市')
INSERT City(CityName) Values('天津市')
INSERT City(CityName) Values('上海市')
INSERT City(CityName) Values('重庆市')
INSERT City(CityName) Values('邯郸市')
INSERT City(CityName) Values('石家庄市')
INSERT City(CityName) Values('保定市')
INSERT City(CityName) Values('张家口市')
INSERT City(CityName) Values('承德市')
INSERT City(CityName) Values('唐山市')
//省略...
从表结构及示例数据来看，这里没有城市名称拼音首字母字段，那如何完成拼音搜索呢？不要着急，这得在数据库中建立一个函数，用来返回汉字的拼音首字母。
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）前台页面
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../js/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<script type="text/javascript" src="../js/jquery-ui/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$( "#cityNameId" ).focus(function(){
//智能提示
$( "#cityNameId" ).autocomplete({
source:function(request,response){
$.ajax({
type:"POST",
url:"../cityManage/showTipsByCityName.action",
dataType:"json",
cache : false,
async: false,
data : {
"cityName": $("#cityNameId").val(),
},
success:function(json){
response($.map(json.autoSuggests,function(item){
return {
label:item,
value:item
};
}));
}
});
}
});
});
</script>
</head>
<body>
城市名称：
<div class="ui-widget" style="display:inline">
<input type ="text" id="cityNameId" name="cityName" >
</div>
</body>
</html>
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;
}
}
4）DAO层
package com.dong.dao.impl; import java.util.List; import com.dong.dao.ICityDao;
import com.dong.framework.BaseDao;
import com.dong.po.City; public class CityDaoImpl extends BaseDao<City> implements ICityDao { /**
* 根据名称或拼音搜索城市
* @param cityName
* @return List<City> 城市列表
*/
public List<City> findByName(String cityName){ String hql = "from City c where c.cityName like ? or dbo.f_GetPy(c.cityName) like ?";
return find(hql, "%" + cityName + "%",cityName + "%"); } }
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的页面修改为：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="../js/jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<style>
.ui-autocomplete {
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 100px;
}
</style>
<script type="text/javascript" src="../js/jquery-ui/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript">
$( "#cityNameId" ).focus(function(){
//智能提示
$( "#cityNameId" ).autocomplete({
source:function(request,response){
$.ajax({
type:"POST",
url:"../cityManage/showTipsByCityName.action",
dataType:"json",
cache : false,
async: false,
data : {
"cityName": $("#cityNameId").val(),
},
success:function(json){
response($.map(json.autoSuggests,function(item){
return {
label:item.cityName,
value:item.cityName,
id:item.cityId
};
}));
}
});
},
select:function( event, ui ) {
$("#cityId").val(ui.item.id);
}
});
});
</script>
</head>
<body>
城市名称：
<div class="ui-widget" style="display:inline">
<input type ="text" id="cityNameId" name="cityName" />
<input type="hidden" id="cityCode" />
</div>
</body>
</html>
（2）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;
/** 智能提示列表，以JSON数据格式返回 */
private List<City> autoSuggests = new ArrayList<City>(); /**
* 智能提示，自动补全功能
* @return String
*/
public String autoComplete(){ autoSuggests = cityService.findByName(cityName);
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=true
@JSON(serialize=true)
public List<City> getAutoSuggests() {
return autoSuggests;
} public void setAutoSuggests(List<City> autoSuggests) {
this.autoSuggests = autoSuggests;
}
}
参考资料：
1.参考资料：http://www.cnblogs.com/dongliyang/archive/2013/01/20/2868699.html
2.获取汉字拼音首字母的函数，来自：http://www.cnblogs.com/wuhuacong/archive/2010/01/25/1655916.html
【jQuery】JQuery-ui autocomplete与strtus2结合使用的更多相关文章
- jQuery UI AutoComplete的使用
现场提出优化单,Table Mapping里关于获取数据源下所有表名的地方由于表数量过多选择不便,需添加搜索功能.原本的实现是一个Dialog ,现打算将其改为AutoComplete. 框架使用的是 ...
- Jquery ui autocomplete简单api
重要说明:与配置选项类似,Autocomplete插件的方法也不是直接调用,而且通过autocomplete()方法进行间接调用.例如: $("#title").autocompl ...
- jquery ui autocomplete 实现点击文本框，出现所有查询信息效果,与bootstrap结合使用修改样式
直接看代码 <!doctype html> <html lang="en"> <head> <meta charset="utf ...
- jQuery ui autocomplete下拉列表样式失效解决，三种获取数据源方式,
jQuery有很多很多的已经实现,很漂亮的插件,autocomplete就是其中之一.jQuery ui autocomplete主要支持字符串Array.JSON两种数据格式,jQuery ui b ...
- jQuery UI Autocomplete是jQuery UI的自动完成组件（share）
官网:http://jqueryui.com/autocomplete/ 以下分享自:http://www.cnblogs.com/yuzhongwusan/archive/2012/06/04/25 ...
- JQuery UI Autocomplete与jquery.autocomplete.js
程序中要把一个select改成可以下拉搜索的,就想到了使用下autocomplete.js大概是这么个东西. 问了下同学,推荐我使用Jquery Ui autocomplete,下载下来开始调试使用, ...
- 可输入自动匹配Select——jquery ui autocomplete
<!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- jQuery.ui autoComplete使用
官网 http://api.jqueryui.com/autocomplete/#option-source 参考了 http://www.cnblogs.com/lwme/archive/2012 ...
- jquery UI autocomplete当输入框焦点聚焦时自动弹出跟随下拉框
$("#search").autocomplete({ minLength: 0, source: function(request,response){ // request对象 ...
随机推荐
- Objective-C:协议protocol
六.协议(protocol) 关键字:@optional.@required (1)是一个类共享的一个方法列表 (2)它声明了一系列的方法而不进行实现 (3)遵从某个协议,就是需要实现协议中的方法 ( ...
- java.net.URI 简介 文档 API
URI 简介 文档地址:http://tool.oschina.net/apidocs/apidoc?api=jdk-zh public final class java.net.URI extend ...
- Android wifi无线调试App新玩法ADB WIFI
Wifi 调试App已经不是什么新鲜的事情了,之前也看过不少,不是使用麻烦就是需要root权限,今个我给大家介绍一款好用的android studio 插件--ADB WIFI. 安装 setting ...
- 20 个具有惊艳效果的 jQuery 图像缩放插件
jQuery相对与Flash的魔力已经贯穿整个网络.尽管,Flash层被认为是用于网页设计的首选,然而随着jQuery的出现,以及他的酷似Flash的交互式特效使得网页更加的优雅——Flash开始靠边 ...
- 五条强化 SSH 安全的建议
当你查看你的 SSH 服务日志,可能你会发现充斥着一些不怀好意的尝试性登录.这里有 5 条常规建议(和一些个别特殊策略)可以让你的 OpenSSH 会话更加安全. 强化密码登录 密码登录很方便,因为你 ...
- cognos report同比环比以及默认为当前月分析
现在的需求是按月份分析不同时期的余额数据,.(报表工具:cognos report:建模工具:FM) ------------------------------------------------- ...
- 微信小程序开发及相关设置小结
今年过年,主要看了<奇葩说>和<电锯惊魂>,很不错,好东西的确需要留出足够的时间来看,匆匆忙忙走马观花是对作者的不尊重.除此之外,就是研究了一下微信小程序开发,先说对小程序的看 ...
- Caused by: com.alibaba.dubbo.remoting.TimeoutException: Waiting server-side response timeout by scan timer. start time: 2016-07-20 16:27:34.873, end time: 2016-07-20 16:27:39.895, client elapsed: 0 ms
方案一: 重启dubbo连接 zookeeper 方案二: 经压测,greys跟踪得知,是dubbo的monitor的问题.主要超时的方法是dubbo的getIP方法,monitor每次收集数据的时候 ...
- [Javascript] Coding interview problem: Scheduler functional way
Implement a job scheduler which takes in a function f and an integer n, and calls f after nmilliseco ...
- Jmeter+Ant+Jenkins搭建持续集成的接口测试框架
https://my.oschina.net/hellotest/blog/516079 摘要: 一个系统通常有多个接口,软件的生命周期中,我们会不断的去优化老的接口和开发新的接口,那么在这个过程中, ...