EasyUI combotree实现模糊筛选功能

EasyUI没有提供Combotree的筛选功能，但是控件的事件完全继承自combo和tree控件，其中tree有筛选功能：doFilter（combobox也有filter，不过combotree不是继承自combobox），可以用这个功能来实现筛选。

要在输入框输入时触发此事件，调用筛选功能，就要用到combo的keyHandler事件：

	/**
	 * 默认值
	 */
	$.fn.combo.defaults = $.extend({}, $.fn.validatebox.defaults, {
				width : "auto",
				panelWidth : null,
				panelHeight : 200,
				multiple : false,
				separator : ",",
				editable : true,
				disabled : false,
				hasDownArrow : true,
				value : "",
				delay : 200,
				keyHandler : {
					up : function() {
					},
					down : function() {
					},
					enter : function() {
					},
					query : function(q) {
					}
				},
				onShowPanel : function() {
				},
				onHidePanel : function() {
				},
				onChange : function(_5d, _5e) {
				}
			});
})(jQuery);

当输入变化时调用query来筛选：

            query: function (q) {
                var t = $(this).combotree('tree');
                t.tree('doFilter', q);
            }

当然，要想在框中输入就要开启edit：editable:true

示例：

修改默认值：

        //combotree可编辑，自定义模糊查询  
        $.fn.combotree.defaults.editable = true;
        $.extend($.fn.combotree.defaults.keyHandler, {
            up: function () {
                console.log('up');
            },
            down: function () {
                console.log('down');
            },
            enter: function () {
                console.log('enter');
            },
            query: function (q) {
                var t = $(this).combotree('tree');
                t.tree('doFilter', q);
            }
        });

然后再创建combotree，适用于单选，代码中增加了判断，避免手工输入不存在的选项：

    MYVARS.bCustomerChanged = false;
    MYVARS.selectRow = null;
    $('#' + ID).combotree({
        url: MYVARS.basePath + '../Inc/U8/getCustomerWithClassTreeData.ashx',
        lines: true,
        panelWidth: 300,
        panelHeight: 400,
        required: true,
        onChange: function (newValue, oldValue) {
            MYVARS.bCustomerChanged = false;//记录是否有改变（当手动输入时发生)  
        },
        onHidePanel: function () {
            var t = $(this).combotree('getValue');
            if (MYVARS.bCustomerChanged) {
                if (MYVARS.selectRow == null || t != MYVARS.selectRow.id) {//没有选择或者选项不相等时清除内容  
                    alert('请选择，不要直接输入');
                    $(this).combotree('clear');
                } else {
                    //do something...  
                }
            }
            MYVARS.bCustomerChanged = false;
            MYVARS.selectRow = null;
        },
        onSelect: function (row) {
            MYVARS.selectRow = row;
            $('#' + ID).combotree('setValue', row.id);
        },
        onClick: function (node) {
            if (node.type != '1') {
                $('#' + ID).combotree('clear');
                alert('只能选择客户，不可选择分类');
            }
        }
    });
    $('#' + ID).parent().find('.textbox-text').blur(function () {
        $('#' + ID).combotree('clear');
    });

keyHandler事件也可以写在combotree的选项中：

$(xx).combotree({keyHandler:{
query:function(q){
……
}
}})

效果：

未筛选：

已筛选：