关于combotree的使用（下拉展示本地Json文件数据源，模糊查询）

一、首先我们实现combotree的下拉展示。

1.Html代码。

<select id="Name" style="width:143px;"></select>

2.<script>JS代码。

$(function () {
            $('#Name').combotree({
                url: 'Info.json',
                valueField: 'id',
                textField: 'text',
                editable: true,
            });
        });

3.json文件代码。

[{
"id":1,
"text":"City",
"children":[{
"id":11,
"text":"Wyoming",
"children":[{
"id":111,
"text":"Albin"
},{
"id":112,
"text":"Canon"
},{
"id":113,
"text":"Egbert"
}]
},{
"id":12,
"text":"Washington",
"state":"closed",
"children":[{
"id":121,
"text":"Bellingham"
},{
"id":122,
"text":"Chehalis"
},{
"id":123,
"text":"Ellensburg"
},{
"id":124,
"text":"Monroe"
}]
}]
}]

4.注意：我们在异步加载json文件的时候要把json文件放在html文件同级。

二、combotree的模糊查询

在输入C的时候查询到以下：

因为combotree只有一个editable：true 编辑的属性，我们只能在<script>中加上扩展方法（直接Copy以下代码即可）：

        (function () {
            $.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');
                    var nodes = t.tree('getChildren');
                    for (var i = 0; i < nodes.length; i++) {
                        var node = nodes[i];
                        if (node.text.indexOf(q) >= 0) {
                            $(node.target).show();
                        } else {
                            $(node.target).hide();
                        }
                    }
                    var opts = $(this).combotree('options');
                    if (!opts.hasSetEvents) {
                        opts.hasSetEvents = true;
                        var onShowPanel = opts.onShowPanel;
                        opts.onShowPanel = function () {
                            var nodes = t.tree('getChildren');
                            for (var i = 0; i < nodes.length; i++) {
                                $(nodes[i].target).show();
                            }
                            onShowPanel.call(this);
                        };
                        $(this).combo('options').onShowPanel = opts.onShowPanel;
                    }
                }
            });
        })(jQuery);