combobox和combotree,搜索和多选功能的实现

在项目中遇到一个需求,在一个form表单中有两个下拉框,一个是树形的,另一个就是简单的下拉框;
分别使用EasyUI的combotree 和 combobox来实现
模糊查询的效果如下:

第一步

根据《easyUI Combobox自定义调整支持中文模糊查询》一文提供的解决方法,修改了两处easyUI的源码:

1. 调整Combobox支持模糊查询，并支持从任意位置开始匹配
   解决方案:将字符串的indexof匹配由原来的判定为头部匹配，改为包含匹配
   return row[opts.textField].toLowerCase().indexOf(q.toLowerCase())==0;
   修改为return row[opts.textField].toLowerCase().indexOf(q.toLowerCase())>-1;
   我用的是eaysUI 1.4版本，修改代码在 jquery.easyui.min.js 中大概 12140 行左右。
2. 调整Combobox，以支持搜索时中文输入结束不自动触发查询
   解决方案：将触发查询执行的引起事件由keydown改成 keyup

$.fn.combo.defaults=$.extend({},$.fn.textbox.defaults,{inputEvents:{click:_8a2,keydown:_8a6,paste:_8a6,drop:_8a6},panelWidth:null,panelHeight:200,panelMinWidth:null,panelMaxWidth:null,panelMinHeight:null,panelMaxHeight:null,panelAlign:"left",multiple:false,selectOnNavigation:true,separator:",",hasDownArrow:true,delay:200,keyHandler:{up:function(e){
},down:function(e){
},left:function(e){
},right:function(e){
},enter:function(e){
},query:function(q,e){
}},onShowPanel:function(){
},onHidePanel:function(){
},onChange:function(_8d6,_8d7){
}});

修改为

$.fn.combo.defaults=$.extend({},$.fn.textbox.defaults,{inputEvents:{click:_8a2,keyup:_8a6,paste:_8a6,drop:_8a6},panelWidth:null,panelHeight:200,panelMinWidth:null,panelMaxWidth:null,panelMinHeight:null,panelMaxHeight:null,panelAlign:"left",multiple:false,selectOnNavigation:true,separator:",",hasDownArrow:true,delay:200,keyHandler:{up:function(e){
},down:function(e){
},left:function(e){
},right:function(e){
},enter:function(e){
},query:function(q,e){
}},onShowPanel:function(){
},onHidePanel:function(){
},onChange:function(_8d6,_8d7){
}});

我用的是eaysUI 1.4版本，修改代码在 jquery.easyui.min.js 中大概 11723 行左右。

完成以上步骤之后,设置easyUI的editable属性(可编辑)为true,multiple(多选)属性为:true;
现在就可以在下拉框中搜东西了,但是这个时候还有一个缺点,就是下拉框里面可以任意输入汉字,如果用户不选择,而是直接提交表单的话就会产生错误数据;

第二步

感谢一直程序缘在《easyui中combobox 验证输入的值必须为选项框中的数据》一文中提供的思路,我们可以添加一个事件,对用户输入的内容进行判断，不合适的时候将其删除;

下面是combotree的判断思路:

    $(".easyui-combotree").combotree({
        onHidePanel: function() {
            var _value = $(this).combotree('getValues');
            if(_value.length==0){
                $(this).combotree('clear');
            }else{
                $(this).combotree('setValue',_value)
            }
        }
    });

下面是combobox的判断思路:

    $(".easyui-combobox").combobox({ 
        onHidePanel : function() { 
            var _values = $(this).combobox('getValues'); 
            var values = new Array(); 
            var _options = $(this).combobox('options'); 
            var _data = $(this).combobox('getData');/* 下拉框所有选项 */ 
            for(var j = 0; j < _values.length; j++){ 
                for (var i = 0; i < _data.length; i++) { 
                    if (_data[i][_options.valueField] == _values[j]) { 
                        values.push(_values[j]) 
                        break; 
                    } 
                } 
            } 
            $(this).combobox('setValues',values); 
        }, 
        onSelect: function() { 
            var _values = $(this).combobox('getValues'); 
            var values = new Array(); 
            var _options = $(this).combobox('options'); 
            var _data = $(this).combobox('getData');/* 下拉框所有选项 */ 
            for(var j = 0; j < _values.length; j++){ 
                for (var i = 0; i < _data.length; i++) { 
                    if (_data[i][_options.valueField] == _values[j]) { 
                        values.push(_values[j]) 
                        break; 
                    } 
                } 
            } 
            $(this).combobox('setValues',values); 
        } 
    });