天天看點

easyui之 combobox自動補全(多選)

1、easyui的combobox組建設定multiline和multiple兩個屬性為true時,表示可以多選;

2、預設,combobox多選想之間是通過英文的逗号“,”隔開的,即在文本框中輸入英文逗号就可以開始一次新的自動不全操作,這對于輸入中文來說很不友善,每次選中一項後還得切換到英文輸入逗号然後在開始下一次輸入不全。。。但combobox提供了separator屬性,通過它可以設定使用什麼分割;

3、擴充filter方法,因為combobox就是通過該方法進行自動不全比對的,源碼預設是return row[opts.textField].indexOf(q) ==0;; 表示聯想出來的内容以輸入内容開頭,這樣沒法達到模糊比對的需求,是以修改成>-1;

4、預設,當從combobox的聯想下拉菜單中選中一項後,光标沒法定位到輸入框文字後面,通過onSelect事件,可以做到這一點。

5、一旦使用了separator後,編輯時回顯就無法回顯了,easyui預設使用英文進行分割,是以setValues時如果要回顯必須按照separator指定的格式進行設定。

執行個體:

$("#adFilterCmp").combobox({
  valueField: 'id',   
        textField: 'text',
        multiple:true,
        multiline:true,
        editable:true,
        separator:' ',
        filter: function(q, row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) >-1;;
      },
      onSelect:function(record) {
        $("textarea").focus();
      },
        url:'<%=basePath %>report/getAds'
});      

繼續閱讀