現場提出優化單,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}格式