文章图片
jsp里面的js的引用及页面内容：
rel="stylesheet" type="text/css" />
对应的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 ""+""+item.companyCame+""+"";
}
//等用户选择数据后执行另一个操作(这是本人的需求填充完之后执行另外一个操作，可根据自己需求选用，如不需要写到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
}
}
},
error:function(e){
alert("查询收款银行失败");
}
});
};
});
});
Action层代码：注意此处，js传参的时候没有带参数为什么用q去接受参数呢
看这段if(data[q]){return data[q];
}因为jquery.autocomplete.min.js里面的参数是q所以我们也必须写q去接受页面传过来的参数
private String q;
【java技术|基于jquery的搜索自动填充功能jquery.autocomplete.min.js插件的引用】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
接下啦是mapper文件里面对应的sql语句
select * from gl_company
company_name like '%'+#{q}+'%'
推荐阅读
- 操作系统|[译]从内部了解现代浏览器(1)
- web网页模板|如此优秀的JS轮播图，写完老师都沉默了
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- vue.js|vue中使用axios封装成request使用
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历
- JavaScript|JavaScript — call()和apply()、Date对象、Math、包装类、字符串的方法
- JavaScript|JavaScript之DOM增删改查(重点)
- javascript|vue使用js-xlsx导出excel，可修改格子样式，例如背景颜色、字体大小、列宽等
- javascript|javascript中的数据类型转换