1. 程式人生 > >easyui之 combobox自動補全(多選)

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'
});