【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对象 ...
随机推荐
- 初识EntityFramework6
初识EntityFramework6 什么是EF? EF是一种ORM(Object-relational mapping)框架,它能把我们在编程时使用对象映射到底层的数据库结构.比如,你可以在数据库中 ...
- 使用C#创建及调用WCF完整实例 (Windows服务宿主)
关于WCF的概念.原理.优缺点等,在这里就不多说了,网上很多,可以自行搜索,比我解释的要专业的多. 这里直接说使用Windows 服务(Windows Service)作为宿主如何实现,其它方式不在此 ...
- jQuery多媒体播放器插件jQuery Media Plugin使用方法
jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real ...
- 设计模式之十五:訪问者模式（Visitor Pattern）
訪问者模式(Visitor Pattern)是GoF提出的23种设计模式中的一种,属于行为模式. 据<大话设计模式>中说算是最复杂也是最难以理解的一种模式了. 定义(源于GoF<De ...
- QlikView图表显示同比数据
数据准备例如以下: SalesData: LOAD Num(ID) as ID, Date(Date) as Date, Month, Num(Year) as Year, Num(Sales) as ...
- FM同步数据库中结构已经发生变化的表
接触Cognos很久了,最近遇到一个小问题. 在FM模型设计的过程中,有一张表jd_f_order.之后为了更全面的分析这个数据,在这个事实表中引入了一个新的字段商品类型字段,结构如图 但是由于jd_ ...
- wireshark 的使用（filter的用法）
转自:http://blog.csdn.net/hanyuxinting/article/details/5558095 过滤器语法---------------------------------- ...
- windows、linux mysql部署
阅读目录: 1.Windows下安装MySQL 2.Linux下安装MySQL 序章: MySQL是个小型的数据库,用来自己做小项目,做学习练习什么的再适合不过了,不过新手总会被一些莫名奇妙的问题难住 ...
- JavaScript 之 日常积累
1. <a>标签"加入收藏",兼容IE,FireFox等 function bookmarksite() { if (window.sidebar) { // Mozi ...
- Table '' is marked as crashed and should be repaired 解决方法
解决方法: 找到mysql的安装目录的bin/myisamchk工具,在命令行中输入: myisamchk -c -r ../data/mysql/user.MYI 然后myisamchk 工具会帮助 ...