基于jquery的搜索自动填充功能jquery.autocomplete.min.js插件的引用
来源:互联网 发布:wechat mac download 编辑:程序博客网 时间:2024/05/16 15:26
jsp里面的js的引用及页面内容:
<html>
<head>
<link
href="../../resource/jquery/plugins/autocomplete/jquery.autocomplete.css"
rel="stylesheet" type="text/css" />
<script src="../../resource/jquery/plugins/validation/jquery.validate.js" type="text/javascript"></script>
<script src="../../resource/jquery/plugins/autocomplete/jquery.autocomplete.min.js" type="text/javascript"></script>
</head>
<body>
<form>
<table>
<tr>
<td class="td_normal_title" style="width:97px;">收款单位</td>
<td>
<input type="text" name="finCollectionRegister.companyId" autocomplete="on" id="gathering_unit" />
</td>
</tr>
</table>
</form>
<body>
</html>
对应的js代码:
/**
* 搜索收款单位
*/
$(document).ready(function() {
var urlStr=Com_Parameter.ContextPath +"/fin/gathering/findByCompanyName.action";
$("#gathering_unit").autocomplete(urlStr, {
minChars : 1,
max : 15,
matchContains: true,//包含即可自动填充,无论是一个单字母还是一个字符串都可以匹配
mustMatch: false, //必须设置为false
dataType:"json",
extraParams: {
search: function() {
return $("#gathering_unit").val();
}
},
parse : function(data) {
var rows = [];
var d = data.companyList;
for ( var i = 0; i < d.length;i++) {
rows[rows.length] = {
data : d[i],
value : d[i].companyCode,
result : d[i].companyCame
};
};
return rows;
},
formatItem : function(item){
return "<div>"+"<font color='gray'>"+item.companyCame+"</font>"+"</div>";
}
//等用户选择数据后执行另一个操作(这是本人的需求填充完之后执行另外一个操作,可根据自己需求选用,如不需要写到result的时候即可停下)
}).result(function(event,item){
var companyName = $("#gathering_unit").val();
if(companyName != null){
var urlStr=Com_Parameter.ContextPath +"/fin/gathering/findCompany.action";
$("#gathering_bank").find("option").eq(0).nextAll().remove();
$("#gathering_account").find("option").eq(0).nextAll().remove();
$.ajax({
type:"POST",
url:urlStr,
data:{companyName:companyName},
dataType:"json",
success:function(data){
if(data.bankList != null){
var $select = $("#gathering_bank");
for(var i=0;i<data.bankList.length;i++){
$select.append('<option value='+data.bankList[i].bankCode+'>'+data.bankList[i].bankName+'</option>');
}
}
},
error:function(e){
alert("查询收款银行失败");
}
});
};
});
});
Action层代码:注意此处,js传参的时候没有带参数为什么用q去接受参数呢
看这段if(data[q]){return data[q];}因为jquery.autocomplete.min.js里面的参数是q所以我们也必须写q去接受页面传过来的参数
private String q;
private GlCompanyService glCompanyService;
/**
* ajax操作根据公司名字模糊查找公司
* @return
*/
public String findByCompanyName(){
companyList = glCompanyService.searchCompanByName(q);
return "success";
}
public GlCompanyService getGlCompanyService() {
return glCompanyService;
}
public void setGlCompanyService(GlCompanyService glCompanyService) {
this.glCompanyService = glCompanyService;
}
public String getQ() {
return q;
}
public void setQ(String q) {
this.q = q;
}
Service就省列不写啦,反正都是业务代码:
接下啦是Dao层:由于我们用的是mybatis+struts2+spring所以就没有什么dao层啦但是接口的还是有的
/**
* 根据公司名字模糊查询公司
* @param companyName
* @return
*/
public List<GlCompany> selectCompanByName(String companyName);
接下啦是mapper文件里面对应的sql语句
<select id="selectCompanByName" parameterType="java.lang.String" resultMap="GlCompanyBaseResultMap">
select * from gl_company
<where>
<if test="_parameter != null">
company_name like '%'+#{q}+'%'
</if>
</where>
</select>
- 基于jquery的搜索自动填充功能jquery.autocomplete.min.js插件的引用
- 基于jquery的自动完成插件jquery.autocomplete.js
- 基于jquery的自动完成插件jquery.autocomplete.js
- jQury下的自动补全及插件jquery.autocomplete.min.js的使用
- 使用jquery autocomplete实现类似搜索引擎的自动填充功能
- jquery.autoComplete.js 插件的自定义搜索规则
- jquery.autocomplete.js 插件的自定义搜索规则
- jquery.autocomplete.js 插件的自定义搜索规则
- jquery最新插件Autocomplete搜索自动提示功能
- 自动补全插件jquery.autocomplete.js的使用
- ashx+jquery+autocomplete.js实现自动填充
- Jquery AutoComplete的使用方法实例(自动完成、自动填充)插件
- jquery.ui.autocomplete.js搜索自动完成功能
- jQuery的Autocomplete实现自动完成/自动填充
- jQuery自动完成的插件(AutoComplete)
- jQuery的自动完成插件autocomplete
- jquery的自动完成autocomplete插件用法
- jQuery的自动完成插件autocomplete
- 新浪微博登录,QQ登录网页javascript脚本实现RSA加密的原理
- HBase技术介绍
- android include标签的使用,在RelativeLayout中使用include标签需注意!!!!!
- 16、高级工具页面设计
- 计算机书籍小结
- 基于jquery的搜索自动填充功能jquery.autocomplete.min.js插件的引用
- iPhone如何打包成一个通用的静态库文件(模拟器和真机都可以用)
- 为何透明图片IE6下有阴影
- 敏捷开发之极限编程过程
- Linux下diff,Patch的应用和制作方法介绍
- 浅谈随机游走
- c++对象池
- Google云计算GFS+MapReduce
- ant异常整理-错误: 非法字符: \65279 .