【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对象 ...
随机推荐
- 我所遭遇过的游戏中间件--Scaleform
我所遭遇过的游戏中间件---Scaleform Scaleform帮助开发人员利用现代系统的三维硬件加速性能创建电影品质的菜单.游戏内HUD,动画纹理.迷你游戏以及移动游戏与应用.Scaleform作 ...
- pymysql模块用法
python关于mysql的API--pymysql模块 pymsql是Python中操作MySQL的模块,其使用方法和py2的MySQLdb几乎相同. 模块安装 1 pip install pymy ...
- WF4.0(2)----设计工作流
自从做了程序员,发现自己长胖了,而且自己的身体抵抗力也出了问题,最近身体不适,公司工作任务最近也很赶,上次写了WF4.0的简介,这次就工作中工作流设计的几种方式稍微总结一下.设计工作流包括四种方式:流 ...
- android 百度地图demo 随感
最近项目组的老大要我对百度的android的sdk进行一段的预研,由于技术太菜,出了不少的错误,因此有一点感悟了. 嗨,这个错误浪费了我一天的时间的时候,我按照百度的技术文档一步步的来做,每部基本上都 ...
- Android Notification实现推送消息过程中接受到消息端有声音及震动及亮屏提示
在Android Notification状态栏通知一文中,简单实现了消息的推送效果,这里就接着上文说一下,当用户接受到消息时的提示效果 // 5-增加震动及声音及亮屏 notification.de ...
- Logistic Regression的几个变种
原文:http://blog.xlvector.net/2014-02/different-logistic-regression/ 最近几年广告系统成为很多公司的重要系统之一,定向广告技术是广告系统 ...
- shell和awk配合使用
#!/bin/sh#$1 video id#$2 save result file########################################################### ...
- Appium Python 三：Desired capabilities
简介 Desired capabilities 是一些键值对的集合.python里面就采用字典的方式. 客户端将这些键值对发给服务端,告诉服务端我们想要怎么测试.比如,我们可以把 platformNa ...
- php之快速入门学习-17（PHP 命名空间）
PHP 命名空间(namespace) PHP 命名空间(namespace)是在PHP 5.3中加入的,如果你学过C#和Java,那命名空间就不算什么新事物. 不过在PHP当中还是有着相当重要的意义 ...
- Java从零开始学三十七(JAVA IO- 二进制文件读写)
一.简述 二.使用步骤 DataInputStream: 引入相关的类 构造数据输入流的对象(如:FileInputStream,BufferedWriter包装后读取文件等) 读取二进制文件的数据 ...