DIV CSS 佈局教程網

本文實例講述了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就不需要再進行檢索了,直接使用緩存.通常是打開這個選項以減輕服務器的負擔以提高性能.只會在緩存長度大於1時有效.Default: true
* matchCase (Boolean):
    比較是否開啟大小寫敏感開關.使用緩存時比較重要.如果你理解上一個選項,這個也就不難理解,就好比foot要不要到FOO的緩存中去找.Default: false
* multiple (Boolean):
    是否允許輸入多個值即多次使用autoComplete以輸入多個值. Default: false
* multipleSeparator (String):
    如果是多選時,用來分開各個選擇的字符. Default: ","
* scroll (Boolean):
    當結果集大於默認高度時是否使用卷軸顯示 Default: true
* scrollHeight (Number):
    自動完成提示的卷軸高度用像素大小表示  Default: 180
* formatItem (Function):
    為每個要顯示的項目使用高級標簽.即對結果中的每一行都會調用這個函數,返回值將用LI元素包含顯示在下拉列表中. Autocompleter會提供三個參數(row, i, max): 返回的結果數組, 當前處理的行數(即第幾個項目,是從1開始的自然數), 當前結果數組元素的個數即項目的個數. Default: none, 表示不指定自定義的處理函數,這樣下拉列表中的每一行只包含一個值.
* formatResult (Function):
    和formatItem類似,但可以將將要輸入到input文本框內的值進行格式化.同樣有三個參數,和formatItem一樣.Default: none,表示要麼是只有數據,要麼是使用formatItem提供的值.
* formatMatch (Function):
    對每一行數據使用此函數格式化需要查詢的數據格式. 返回值是給內部搜索算法使用的. 參數值row
* extraParams (Object):
    為後台(一般是服務端的腳本)提供更多的參數.和通常的作法一樣是使用一個鍵值對對象.如果傳過去的值是{ bar:4 },將會被autocompleter解析成my_autocomplete_backend.php?q=foo&bar=4 (假設當前用戶輸入了foo). Default: {}
* result (handler)  Returns: jQuery
    此事件會在用戶選中某一項後觸發，參數為：
    event: 事件對象. event.type為result.
    data: 選中的數據行.
    formatted:formatResult函數返回的值
    例如：

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

注：另一種方式可動態改變參數傳入值。

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

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

$.Autocompleter.defaults =

我們在後面添加一段

onBegin: null,

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

function onChange(crap, skipPrevCheck)

在函數時裡面添加如下代碼：

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

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

function onChange(crap, skipPrevCheck) {
    //2010-01-27 ，添加onBegin函數，以便在啟動onChange的時候，可以重新設置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();
    }
};

再來看調用：

/*客戶名稱自動匹配*/
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) { //修改--用於動態改變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],       //下拉框顯示數據格式
          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);
  }).bind("unmatch", function(){
    clearCustomerInfo();
  });
}

其實做的只有三步：

1. 在options中添加一個onBegin的參數
2. 在onChange中判斷onBegin是否有賦值，如果有，則調用這個函數，返回將返回值合並到options中去
3. 調用的時候，在onBegin函數中添加一些業務邏輯，並可以重新設置options

就這樣，我們不僅可以達到動態去添加extraParams參數，而且還可以動態地修改其它options參數，這個onBegin在用戶改變輸入框的值就會觸發。

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

希望本文所述對大家jQuery程序設計有所幫助。