jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解

2020-05-27 18:04:12易采站长站整理

本文实例讲述了jQuery autoComplete插件两种使用方式及动态改变参数值的方法。分享给大家供大家参考,具体如下:

一、一次加载、多次使用:

前端JS代码:


/*客户名称自动匹配*/
function customerAutoComplete(){
$.ajax({
type:"GET",
url:encodeURI("/approvalajax/salesOrderApproval_findCustomerList"),
dataType:"json",
success:function(data, textStatus){
if(data != null && data.customerList != null){
$("#customerFullName").autocomplete(data.customerList, {
/**加自定义表头**/
tableHead: "<div><span style='width:40%' class='col-1'>客户编码</span> <span style='width:58%' class='col-2'>客户名称</span></div>",
minChars: 0,
width: 310,
matchContains: "true",
autoFill: false,
extraParams: {ledger:$("#ledger").val()},
formatItem: function(row, i, max) {
return "<span style='width:40%' class='col-1'>" + row.cusCode + "</span> " + "<span style='width:58%' class='col-2'>" + row.cusName + "</span>";
},
formatMatch: function(row, i, max) {
return row.cusCode+row.cusName;
},
formatResult: function(row) {
return row.cusName;
}
}).result(function(e,data,value,sec){/**加选中后的回调函数**/
clearCustomerInfo();
$("#customerShortName").val(data.cusAbbName);
$("#customerFullName").val(data.cusName);
$("#customerCode").val(data.cusCode);
/*根据选择的客户、账套加载 对应产品线、收付款协议、账期*/
setPLAndPCAndCP(data.cusCode);
/*加载存货编码*/
setInventoryAutoComplete(data.cusCode);
}).bind("unmatch", function(){
clearCustomerInfo();
});
}
}
});
}

后台JAVA代码:


/**
* 异步请求结果.
*/
private Map<String, Object> ajaxResultMap;
/**
* @Description 根据账套异步加载客户列表
* @throws Exception
* @return String
*/
public String findCustomerList() throws Exception {
ajaxResultMap = new HashMap<String, Object>();
response.setContentType("text/html;charset=UTF-8");
response.setCharacterEncoding("UTF-8");
List<ErpCustomer> list = erpDataService.findCustomerList(ledger);
ajaxResultMap.put("customerList", list);
return SUCCESS;
}

配置文件相关代码:


<package name="approval-ajax" extends="json-default" namespace="/approvalajax">