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}格式