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

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM