JQuery 的Autocomplete插件 result

工做當中用到了JQuery 的Autocomplete插件，可是遇到的是很是規使用的問題。

其一是下拉菜單的顯示和填入文本框的結果要求的字符串不同，即顯示用戶名，所屬部門，可是填入文本框裏的是用戶名和電話號碼

其二是在用戶Select事後，須要觸發事件，把用戶的ID傳到另外一個隱藏的文本框中

首先咱比較懶，因而在網上google了一下技術方案，發現都比較複雜。出於想偷懶的目的，研究了Autocomplete的在線DOC之後，發現有很簡單的解決方案

首先是應用Autocomplete的formatItem和formatResult函數

返回數據集，懶人有懶辦法，就用字符串加逗號分隔來表示，一行一個結果：

"NAME1,DEPARTMENT1,TEL1,ID1/r/n NAME2, DEPARTMENT2,TEL2,ID2"

formatItem: 下拉菜單數據顯示的定製，這裏只顯示用戶名和部門

formatItem: function(data, i, n) {

      var array = data.toString().split(',') ;
      return array[0] + '/' + array[1] ;

  }
formatResult: 填入文本框的結果，這裏填入用戶名和電話號碼formatItem: function(data, i, n) {

       var array = data.toString().split(',');
        return array[0] + ', ' + array[2];

 }

最後是回調函數，要把用戶ID存到一個隱藏文本框中，對此Autocomplete提供了一個子函數.result()，用來在選擇結果後回調其餘的函數
繼續使用萬能的split函數來把結果字符串拆分

$('inputfield').autocomplete(url, {options}).result
(function(event, data, formatted) {
         var array = data.toString().split(',');
         $("hiddenfield").val(array[3]);

});
由此懶人的Autocomplete應用就完成了

本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/batman9956/archive/2010/08/17/5816997.aspx