jQuery autoComplete插件兩種使用方式及動(dòng)態(tài)改變參數(shù)值的方法詳解

更新時(shí)間：2016年10月24日 09:04:42 作者：awtqty_zhang

這篇文章主要介紹了jQuery autoComplete插件兩種使用方式及動(dòng)態(tài)改變參數(shù)值的方法,結(jié)合實(shí)例形式分析了jQuery自動(dòng)匹配插件autoComplete的使用技巧與動(dòng)態(tài)改變參數(shù)傳入值的實(shí)現(xiàn)方法,需要的朋友可以參考下

本文實(shí)例講述了jQuery autoComplete插件兩種使用方式及動(dòng)態(tài)改變參數(shù)值的方法。分享給大家供大家參考，具體如下：

一、一次加載、多次使用：

前端JS代碼：

/*客戶名稱自動(dòng)匹配*/
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){/**加選中后的回調(diào)函數(shù)**/
          clearCustomerInfo();
          $("#customerShortName").val(data.cusAbbName);
          $("#customerFullName").val(data.cusName);
          $("#customerCode").val(data.cusCode);
          /*根據(jù)選擇的客戶、賬套加載 對(duì)應(yīng)產(chǎn)品線、收付款協(xié)議、賬期*/
          setPLAndPCAndCP(data.cusCode);
          /*加載存貨編碼*/
          setInventoryAutoComplete(data.cusCode);
        }).bind("unmatch", function(){
          clearCustomerInfo();
        });
      }
    }
  });
}

后臺(tái)JAVA代碼：

/**
 * 異步請(qǐng)求結(jié)果.
 */
private Map<String, Object> ajaxResultMap;
/**
 * @Description 根據(jù)賬套異步加載客戶列表
 * @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;
}

配置文件相關(guān)代碼：

<package name="approval-ajax" extends="json-default" namespace="/approvalajax">
    <!-- 銷售訂單 審批相關(guān) -->
    <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>

二、根據(jù)輸入內(nèi)容動(dòng)態(tài)加載：

前端JS代碼：

/*客戶名稱自動(dòng)匹配*/
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],       //下拉框顯示數(shù)據(jù)格式
          value:data.customerList[i].cusName,   //選定后實(shí)際數(shù)據(jù)格式
          result:data.customerList[i].cusName  //選定后輸入框顯示數(shù)據(jù)格式
        };
      }
      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){/**加選中后的回調(diào)函數(shù)**/
    clearCustomerInfo();
    $("#customerShortName").val(data.cusAbbName);
    $("#customerFullName").val(data.cusName);
    $("#customerCode").val(data.cusCode);
    $("#licensecode").val(data.licensecode);
    /*根據(jù)選擇的客戶、賬套加載 對(duì)應(yīng)產(chǎn)品線、收付款協(xié)議、賬期*/
    setPLAndPCAndCP(data.cusCode);
    /*存貨編碼*/
    addInventoryAutoComplete($("#detailListTbody").find("input[tdTag=inventoryCode]"));
  }).bind("unmatch", function(){
    clearCustomerInfo();
  });
}

后臺(tái)JAVA代碼：

/**
 * @Fields q 自動(dòng)填充輔助字符
 */
private String q;
/**
 * 異步請(qǐng)求結(jié)果.
 */
private Map<String, Object> ajaxResultMap;
/**
 * @Description 根據(jù)賬套異步加載客戶列表
 * @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;
}

說明：在使用動(dòng)態(tài)加載時(shí)，請(qǐng)求的URL中插件會(huì)自動(dòng)追加q參數(shù)，用于傳輸輸入的參數(shù)。

注：使用Jquery中的autoComplete插件實(shí)現(xiàn)自動(dòng)匹配功能時(shí)，直接使用它來解析json對(duì)象時(shí)，會(huì)出現(xiàn)一個(gè)錯(cuò)誤提示，因?yàn)樗J(rèn)使用"/n"拆分行、"|"拆分字段。如果需要使用它來解析json對(duì)象，則需要自己實(shí)現(xiàn)其parse方法。

參數(shù)說明：

* minChars (Number):
    在觸發(fā)autoComplete前用戶至少需要輸入的字符數(shù).Default: 1，如果設(shè)為0，在輸入框內(nèi)雙擊或者刪除輸入框內(nèi)內(nèi)容時(shí)顯示列表
* width (Number):
    指定下拉框的寬度. Default: input元素的寬度
* max (Number):
    autoComplete下拉顯示項(xiàng)目的個(gè)數(shù).Default: 10
* delay (Number):
    擊鍵后激活autoComplete的延遲時(shí)間(單位毫秒).Default: 遠(yuǎn)程為400 本地10
* autoFill (Boolean):
    要不要在用戶選擇時(shí)自動(dòng)將用戶當(dāng)前鼠標(biāo)所在的值填入到input框. Default: false
* mustMatch (Booolean):
    如果設(shè)置為true,autoComplete只會(huì)允許匹配的結(jié)果出現(xiàn)在輸入框,所有當(dāng)用戶輸入的是非法字符時(shí)將會(huì)得不到下拉框.Default: false
* matchContains (Boolean):
    決定比較時(shí)是否要在字符串內(nèi)部查看匹配,如ba是否與foo bar中的ba匹配.使用緩存時(shí)比較重要.不要和autofill混用.Default: false
* selectFirst (Boolean):
    如果設(shè)置成true,在用戶鍵入tab或return鍵時(shí)autoComplete下拉列表的第一個(gè)值將被自動(dòng)選擇,盡管它沒被手工選中(用鍵盤或鼠標(biāo)).當(dāng)然如果用戶選中某個(gè)項(xiàng)目,那么就用用戶選中的值. Default: true
* cacheLength (Number):
    緩存的長(zhǎng)度.即對(duì)從數(shù)據(jù)庫(kù)中取到的結(jié)果集要緩存多少條記錄.設(shè)成1為不緩存.Default: 10
* matchSubset (Boolean):
    autoComplete可不可以使用對(duì)服務(wù)器查詢的緩存,如果緩存對(duì)foo的查詢結(jié)果,那么如果用戶輸入foo就不需要再進(jìn)行檢索了,直接使用緩存.通常是打開這個(gè)選項(xiàng)以減輕服務(wù)器的負(fù)擔(dān)以提高性能.只會(huì)在緩存長(zhǎng)度大于1時(shí)有效.Default: true
* matchCase (Boolean):
    比較是否開啟大小寫敏感開關(guān).使用緩存時(shí)比較重要.如果你理解上一個(gè)選項(xiàng),這個(gè)也就不難理解,就好比foot要不要到FOO的緩存中去找.Default: false
* multiple (Boolean):
    是否允許輸入多個(gè)值即多次使用autoComplete以輸入多個(gè)值. Default: false
* multipleSeparator (String):
    如果是多選時(shí),用來分開各個(gè)選擇的字符. Default: ","
* scroll (Boolean):
    當(dāng)結(jié)果集大于默認(rèn)高度時(shí)是否使用卷軸顯示 Default: true
* scrollHeight (Number):
    自動(dòng)完成提示的卷軸高度用像素大小表示 Default: 180
* formatItem (Function):
    為每個(gè)要顯示的項(xiàng)目使用高級(jí)標(biāo)簽.即對(duì)結(jié)果中的每一行都會(huì)調(diào)用這個(gè)函數(shù),返回值將用LI元素包含顯示在下拉列表中. Autocompleter會(huì)提供三個(gè)參數(shù)(row, i, max): 返回的結(jié)果數(shù)組, 當(dāng)前處理的行數(shù)(即第幾個(gè)項(xiàng)目,是從1開始的自然數(shù)), 當(dāng)前結(jié)果數(shù)組元素的個(gè)數(shù)即項(xiàng)目的個(gè)數(shù). Default: none, 表示不指定自定義的處理函數(shù),這樣下拉列表中的每一行只包含一個(gè)值.
* formatResult (Function):
    和formatItem類似,但可以將將要輸入到input文本框內(nèi)的值進(jìn)行格式化.同樣有三個(gè)參數(shù),和formatItem一樣.Default: none,表示要么是只有數(shù)據(jù),要么是使用formatItem提供的值.
* formatMatch (Function):
    對(duì)每一行數(shù)據(jù)使用此函數(shù)格式化需要查詢的數(shù)據(jù)格式. 返回值是給內(nèi)部搜索算法使用的. 參數(shù)值row
* extraParams (Object):
    為后臺(tái)(一般是服務(wù)端的腳本)提供更多的參數(shù).和通常的作法一樣是使用一個(gè)鍵值對(duì)對(duì)象.如果傳過去的值是{ bar:4 },將會(huì)被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設(shè)當(dāng)前用戶輸入了foo). Default: {}
* result (handler) Returns: jQuery
    此事件會(huì)在用戶選中某一項(xiàng)后觸發(fā)，參數(shù)為：
    event: 事件對(duì)象. event.type為result.
    data: 選中的數(shù)據(jù)行.
    formatted:formatResult函數(shù)返回的值
    例如：

$("#singleBirdRemote").result(function(event, data, formatted) {
 //如選擇后給其他控件賦值，觸發(fā)別的事件等等
});

注：另一種方式可動(dòng)態(tài)改變參數(shù)傳入值。

我們知道這個(gè)插件有一個(gè)extraParams的參數(shù)，因?yàn)閖query.autoComplete只支持q和limit兩個(gè)參數(shù)，假如有這樣的情況，我們需要向服務(wù)器提交更多參數(shù)怎么辦呢，幸好，作者為我們提供一個(gè)擴(kuò)展參數(shù)，就是extraParams。extraParams好是好，可是不幸的是，它是一個(gè)死的參數(shù)，有時(shí)候，我們需要提交一個(gè)活的參數(shù)到服務(wù)器。舉例說明，比如說我們有一個(gè)公司名稱的自動(dòng)完成功能，但我們同時(shí)需要向服務(wù)器提供一個(gè)城市的參數(shù)，正常的情況下沒有問題。但當(dāng)城市的名稱是由用戶選擇的時(shí)候，就有問題了，也就說，這個(gè)城市的名稱是根據(jù)用戶選擇而實(shí)時(shí)變化的，這個(gè)時(shí)候，現(xiàn)有的jquery.autoComplete就無能為力了。

這個(gè)時(shí)候我們就要考慮修改修改一下jquery.autoComplete了，我們先看一下代碼，代碼有一個(gè)onChange事件，這是一個(gè)解發(fā)事件，我們可以在這里添加一個(gè)回調(diào)函數(shù)來解決問題。首先我們要為options中添加一個(gè)參數(shù)叫onBegin，大致就在400行左右吧，有一行這樣的代碼：

$.Autocompleter.defaults =

我們?cè)诤竺嫣砑右欢?/p>

onBegin: null,

然后我們找到onChange事件，約在226行，代碼如下：

function onChange(crap, skipPrevCheck)

在函數(shù)時(shí)里面添加如下代碼：

if (options.onBegin) {
        var op = options.onBegin(options);
        if (op) {
            $.extend(options, op);
        }
}

這段代碼被修改過后看起來就像這樣：

function onChange(crap, skipPrevCheck) {
    //2010-01-27 ，添加onBegin函數(shù)，以便在啟動(dòng)onChange的時(shí)候，可以重新設(shè)置options
    if (options.onBegin) {
      var op = options.onBegin(options);
      if (op) {
        $.extend(options, op);
      }
    }
    //end
    if( lastKeyPressCode == KEY.DEL ) {
      select.hide();
      return;
    }
    var currentValue = $input.val();
    if ( !skipPrevCheck && currentValue == previousValue )
      return;
    previousValue = currentValue;
    currentValue = lastWord(currentValue);
    if ( currentValue.length >= options.minChars) {
      $input.addClass(options.loadingClass);
      if (!options.matchCase)
        currentValue = currentValue.toLowerCase();
      request(currentValue, receiveData, hideResultsNow);
    } else {
      stopLoading();
      select.hide();
    }
};

再來看調(diào)用：

/*客戶名稱自動(dòng)匹配*/
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,
    multiple: false,
    mustMatch: false,
    matchContains: false,
    matchSubset: false,
    autoFill: false,
    onBegin: function(options) { //修改--用于動(dòng)態(tài)改變ledger的值
      options.extraParams.ledger= $("#ledger").val();
      return options;
    },
    //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],       //下拉框顯示數(shù)據(jù)格式
          value:data.customerList[i].cusName,   //選定后實(shí)際數(shù)據(jù)格式
          result:data.customerList[i].cusName  //選定后輸入框顯示數(shù)據(jù)格式
        };
      }
      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){/**加選中后的回調(diào)函數(shù)**/
    clearCustomerInfo();
    $("#customerShortName").val(data.cusAbbName);
    $("#customerFullName").val(data.cusName);
    $("#customerCode").val(data.cusCode);
    $("#licensecode").val(data.licensecode);
    /*根據(jù)選擇的客戶、賬套加載 對(duì)應(yīng)產(chǎn)品線、收付款協(xié)議、賬期*/
    setPLAndPCAndCP(data.cusCode);
  }).bind("unmatch", function(){
    clearCustomerInfo();
  });
}

其實(shí)做的只有三步：

1. 在options中添加一個(gè)onBegin的參數(shù)
2. 在onChange中判斷onBegin是否有賦值，如果有，則調(diào)用這個(gè)函數(shù)，返回將返回值合并到options中去
3. 調(diào)用的時(shí)候，在onBegin函數(shù)中添加一些業(yè)務(wù)邏輯，并可以重新設(shè)置options

就這樣，我們不僅可以達(dá)到動(dòng)態(tài)去添加extraParams參數(shù)，而且還可以動(dòng)態(tài)地修改其它options參數(shù)，這個(gè)onBegin在用戶改變輸入框的值就會(huì)觸發(fā)。

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery窗口操作技巧總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: