一、一次加载、多次使用：
前端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>客户编码</span> <span>客户名称</span></div>", minChars: 0, width: 310, matchContains: "true", autoFill: false, extraParams: {ledger:$("#ledger").val()}, formatItem: function(row, i, max) { return "<span>" + row.cusCode + "</span> " + "<span>" + 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 extends="json-default" namespace="/approvalajax"> <!-- 销售订单 审批相关 --> <action method="{1}"> <result type="json"> <param>ajaxResultMap</param> <param>text/html</param> </result> </action> </package>
二、根据输入内容动态加载：
前端JS代码：
/*客户名称自动匹配*/ function customerAutoComplete(){ $("#customerFullName").autocomplete(encodeURI("/approvalajax/salesOrderApproval_findCustomerList"), { /**加自定义表头**/ tableHead: "<div><span>客户编码</span> <span>客户名称</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>" + row.cusCode + "</span> " + "<span>" + 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方法。
参数说明：