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

本文实例讲述了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>