jQuery UI AutoComplete的使用

現場提出優化單，Table Mapping里關於獲取數據源下所有表名的地方由於表數量過多選擇不便,需添加搜索功能。原本的實現是一個Dialog ，現打算將其改為AutoComplete。

框架使用的是jQuery UI Autocomplete 1.8.23。 據說jquery.autocomplete很好，但還是用框架已經引入的吧。

開工吧，先進菜鳥里面實踐實踐，找找感覺。

基礎的Demo,很簡單只要這樣就可以了

再改改參數

一個基礎功能的AutoComplete就完成了。

--------------------------------------------------------------------------------------------此處分割

AutoComplete 提供了足夠用的方法、事件

常用參數如下

1.Source：用於指定數據來源，類型為String、Array、Function

• 　　String：當使用一個字符串，Autocomplete 插件希望該字符串指向一個能返回 JSON 數據的 URL 資源。
• 　　Array：可用於本地數據的一個數組。支持兩種格式： 字符串數組：[ "Choice1", "Choice2" ] 帶有 label 和 value 屬性的對象數組：[ { label: "Choice1", value: "value1" }, ... ]
• 　　Function(request, response)：第三個變量，一個回調函數，提供最大的靈活性，可用於連接任何數據源到 Autocomplete。通過request.term獲得輸入的值，response([Array])來呈現數據。

2.minLength： 執行搜索前用戶必須輸入的最小字符數。對於僅帶有幾項條目的本地數據，通常設置為零，但是當單個字符搜索會匹配幾千項條目時，設置個高數值是很有必要的。

3.autoFocus：如果設置為 true，當菜單顯示時，第一個條目將自動獲得焦點

 對於source的三個數據來源，我使用了Array。這對我功能的實現已經夠用。如果想要對獲取的值進行再一步加工的話，可以使用Function。Function的靈活性更高些，通過request.term獲得輸入的值，response([Array])來呈現數據

對於事件，舉個栗子

當想要焦點移動到一個條目上（未選擇）時，將某控件上賦值則可使用focus事件監聽，形如這樣

當想要光標剛鍵入控件，就查詢出全部。可通過search方法。就不一一列舉了。可以多試試

原本Source用Function寫了,后來發現其實很簡短的代碼就可以完成了，不需要Function,也不需要刻意寫成{label : xx ,value :xx}格式