本文实例讲述了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">
<!-- 销售订单 审批相关 -->
<action name="salesOrderApproval_*" method="{1}" class="xx.xxx.xxAction">
<result type="json">
<param name="root">ajaxResultMap</param>
<param name="contentType">text/html</param>
</result>
</action>
</package>
二、根据输入内容动态加载：
前端JS代码：
/*客户名称自动匹配*/
function customerAutoComplete(){
$("#customerFullName").autocomplete(encodeURI("/approvalajax/salesOrderApproval_findCustomerList"), {
/**加自定义表头**/
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()},
dataType: 'json',
parse: function(data) {
var rows = [];
if(data == null || data.customerList == null){
return rows;
}
for(var i=0; i<data.customerList.length; i++){
rows[rows.length] = {
data:data.customerList[i], //下拉框显示数据格式
value:data.customerList[i].cusName, //选定后实际数据格式
result:data.customerList[i].cusName //选定后输入框显示数据格式
};
}
return rows;
},
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);
$("#licensecode").val(data.licensecode);
/*根据选择的客户、账套加载 对应产品线、收付款协议、账期*/
setPLAndPCAndCP(data.cusCode);
/*存货编码*/
addInventoryAutoComplete($("#detailListTbody").find("input[tdTag=inventoryCode]"));
}).bind("unmatch", function(){
clearCustomerInfo();
});
}
后台JAVA代码：
/**
* @Fields q 自动填充辅助字符
*/
private String q;
/**
* 异步请求结果.
*/
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.findTop5CustomerList(ledger, q);
ajaxResultMap.put("customerList", list);
return SUCCESS;
}
说明：在使用动态加载时，请求的URL中插件会自动追加q参数，用于传输输入的参数。
注：使用Jquery中的autoComplete插件实现自动匹配功能时，直接使用它来解析json对象时，会出现一个错误提示，因为它默认使用"/n"拆分行、"|"拆分字段。如果需要使用它来解析json对象，则需要自己实现其parse方法。
参数说明：
* minChars (Number):
在触发autoComplete前用户至少需要输入的字符数.Default: 1，如果设为0，在输入框内双击或者删除输入框内内容时显示列表
* width (Number):
指定下拉框的宽度. Default: input元素的宽度
* max (Number):
autoComplete下拉显示项目的个数.Default: 10
* delay (Number):
击键后激活autoComplete的延迟时间(单位毫秒).Default: 远程为400 本地10
* autoFill (Boolean):
要不要在用户选择时自动将用户当前鼠标所在的值填入到input框. Default: false
* mustMatch (Booolean):
如果设置为true,autoComplete只会允许匹配的结果出现在输入框,所有当用户输入的是非法字符时将会得不到下拉框.Default: false
* matchContains (Boolean):
决定比较时是否要在字符串内部查看匹配,如ba是否与foo bar中的ba匹配.使用缓存时比较重要.不要和autofill混用.Default: false
* selectFirst (Boolean):
如果设置成true,在用户键入tab或return键时autoComplete下拉列表的第一个值将被自动选择,尽管它没被手工选中(用键盘或鼠标).当然如果用户选中某个项目,那么就用用户选中的值. Default: true
* cacheLength (Number):
缓存的长度.即对从数据库中取到的结果集要缓存多少条记录.设成1为不缓存.Default: 10
* matchSubset (Boolean):
autoComplete可不可以使用对服务器查询的缓存,如果缓存对foo的查询结果,那么如果用户输入foo就不需要再进行检索了,直接使用缓存.通常是