【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对象 ...
随机推荐
- 数据库实例: STOREBOOK > 表空间 > 编辑 表空间: SYSTEM
ylbtech-Oracle:数据库实例: STOREBOOK > 表空间 > 编辑 表空间: SYSTEM 表空间 > 编辑 表空间: SYSTEM 1. 一般信息返 ...
- Objective-C：NSArray的常见操作
NSArray不可变字符串的主要操作有:创建.枚举.排序.与NSString之间的相互转换 注意: NSArray可以存对象,不可以存基本数据类型.结构体.数组.指针.nil.NULL NSArray ...
- eclipse oracle Database Manager plugin oracle数据库连接插件
在eclipseIDE中开发项目需要经常连接oracle数据库,装一些oracle client 去连接数据库,界面来回切换比较麻烦,所以专门找了一个eclipse插件专门连接oracle,跟大家分享 ...
- 附4 springboot源码解析-run()
public ConfigurableApplicationContext run(String... args) { StopWatch stopWatch = new StopWatch(); / ...
- " 初窥 " nginx
1. 无题 第一次听到Nginx这个词,还是两年前的事儿了,最近常逛CSDN,越来越频繁的接触到这个词汇,今天看了些资料,简单的总结下,作为入门. 2. 背景介绍: Nginx (发音同 engine ...
- oracle和mysql功能相同的函数
wm_concat ---->mysql 的group_concat decode (两条件的)----->mysql 的 if decode (3个及以上条件的)---------> ...
- 关于opacity的思考
今天在封装图片轮播的插件的时候,产生了这个opacity的小小思考. 我这个轮播的思路不是以前baidu输入法官网的设置外层容器overflow为hidden,position为relative用se ...
- CentOS7.0 x86_64系统上构建php开发环境--Lamp（包含设置虚拟文件夹，加入SELinux对httpd的支持等知识）
一.安装mysql,直接用yum安装就可以,mysql在centos7.0版本号中被mariadb替代了. 命令: yum install mysql-server mysql 安装好了,选择改动my ...
- 【MySQL】MySQL-主从复制-集群方案-数据一致性问题解决方案 && MySQL备份的各种姿势
1.写性能如何保证:分库分表 2.读性能如何保证:主从结构,实时备份 3.一致性问题怎么解决: 3.1.微博案例:Redis缓存,热数据查询走Redis,主从的延迟通过Redis消除 3.2.支付宝的 ...
- idea启动崩溃问题
idea启动崩溃问题 内存已经给到1024m了: 注意到项目比较大,有个参数ReservedCodeCasheSize,把这个修改为1024m, 学习了:https://www.cnblogs.com ...