基于jquery的搜索自动填充功能jquery.autocomplete.min.js插件的引用

最新推荐文章于 2024-08-24 07:15:09 发布

JianHangJava

最新推荐文章于 2024-08-24 07:15:09 发布

阅读量1.6k

点赞数

分类专栏： java技术 javascript 文章标签：搜索框自动填充插件

本文链接：https://blog.csdn.net/jianhangjava/article/details/18087379

版权

java技术同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

javascript

2 篇文章 0 订阅

订阅专栏

jsp里面的js的引用及页面内容：

<html>

<head>

</head>

<body>

<form>

<table>

</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>