【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对象 ...
随机推荐
- @Java类加载器及双亲委派模型
类与类加载器 虚拟机设计团队把类加载阶段的"通过一个类的全限定名来获取此类的二进制字节流"这个动作放到Java虚拟机外部去实现,以便让应用程序自己决定如何去获取所需要的类.实现这个 ...
- insert-delete-getrandom-o1-duplicates-allowed
https://leetcode.com/problems/insert-delete-getrandom-o1-duplicates-allowed/ public class Randomized ...
- 【注解】Annotation Target ElementType
背景知识 Annotate.Annotation:注释.注解.批注.注 在java中,注解作为程序的元数据嵌入到程序当中,元数据标签的存在并不影响程序代码的编译和执行. 所谓Annotation就是提 ...
- Mac 苹果OS X小技巧：如何更改文件的默认打开方式
OS X小技巧:如何更改文件的默认打开方式 1.command + i 打开简介 2.选择合适的软件打开方式 3.选择全部更改 如图: 转自:http://digi.tech.qq.com/a/201 ...
- C++:cin、cin.getline()、getline()的用法
主要内容: 1.cin用法 2.cin.getline()用法 3.getline()用法 3.注意的问题 一.cin>> 用法1:输入一个数字或字符 #include <iostr ...
- Android获取网络图片应用示例
1.养成好习惯,配置字符串资源文件 strings.xml <?xml version="1.0" encoding="utf-8"?> <r ...
- PyQt5教程——对话框（6）
PyQt5中的对话框 对话框窗口或对话框是大多数主流GUI应用不可缺少的部分.对话是两个或更多人之间的会话.在计算机应用中,对话框是一个用来和应用对话的窗口.对话框可以用来输入数据,修改数据,改变应用 ...
- Mac Oracle SqlDeveloper 快捷输入
用惯了 plsql 的快捷输入,换了 Mac Oracle SqlDeveloper反倒是找不到了,翻出去找了几次终于找到 SqlDeveloper -- preferences -- 数据库(dat ...
- POSIX 线程详解
一种支持内存共享的简捷工具 POSIX(可移植操作系统接口)线程是提高代码响应和性能的有力手段.在本系列中,Daniel Robbins 向您精确地展示在编程中如何使用线程.其中还涉及大量幕后细节,读 ...
- Starting MySQL.. ERROR! The server quit without updating PID file (/gechong/mysqldata/10-9-23-119.pid).
配置文件修改错误了,还原一下重启服务就OK了. # /etc/init.d/mysql start