【EasyUI】combotree和combobox模糊查詢

這里說的模糊查詢指在輸入框輸入，然后自動在下拉框中顯示匹配結果，類似Google搜索提示

EasyUI庫已經實現了combobox的查詢過濾功能，但只能從頭匹配，原因是EasyUI庫的代碼限制：

filter: function(q, row){
    var opts = $(this).combobox('options');
    return row[opts.textField].indexOf(q) == 0;
}

combobox有一個filter屬性，通過這個屬性來實現查詢效果，在EasyUI庫或本地combobox控件中修改這個filter方法就可以實現自定義查詢效果

$('#businessCityNo').combobox({
    valueField : 'businessCityNo',
    textField : 'businessCityName',
    editable:true ,
    required: true,
    filter: function(q, row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) >= 0;//這里改成>=即可在任意地方匹配
    },
    data : d.rows,
});

當然，直接在生成combobox的地方來添加filter，有多少個就得添加多少次，很麻煩，簡單一點，在本地js文件中覆蓋這個filter：

$.fn.combobox.defaults.filter = function(q, row){
    var opts = $(this).combobox('options');
    return row[opts.textField].indexOf(q) >= 0;
}

效果如下：

combobox可以通過重寫filter方法來實現自定義匹配方式，是因為EasyUI庫有對filter屬性的底層支持，EasyUI的官方文檔中明確提到combobox的屬性列表，其中就有filter：
The properties extend from combo, below is the added properties for combobox.

 

Name	Type	Description	Default
valueField	string	The underlying data value name to bind to this ComboBox.	value
textField	string	The underlying data field name to bind to this ComboBox.	text
groupField	string	Indicate what field to be grouped. Available since version 1.3.4.	null
groupFormatter	function(group)	return group text to display on group item. Available since version 1.3.4. Code example: $('#cc').combobox({ groupFormatter: function(group){ return '<span style="color:red">' + group + '</span>'; } });
mode	string	Defines how to load list data when text changed. Set to 'remote' if the combobox loads from server. When set to 'remote' mode, what the user types will be sent as the http request parameter named 'q' to server to retrieve the new data.	local
url	string	A URL to load list data from remote.	null
method	string	The http method to retrieve data.	post
data	array	The list data to be loaded. Code example: <input class="easyui-combobox" data-options=" valueField: 'label', textField: 'value', data: [{ label: 'java', value: 'Java' },{ label: 'perl', value: 'Perl' },{ label: 'ruby', value: 'Ruby' }]" />	null
filter	function	Defines how to filter the local data when 'mode' is set to 'local'. The function takes two parameters: q: the user typed text. row: the list row data. Return true to allow the row to be displayed. Code example: $('#cc').combobox({ filter: function(q, row){ var opts = $(this).combobox('options'); return row[opts.textField].indexOf(q) == 0; } });
formatter	function	Defineds how to render the row. The function takes one parameter: row. Code example: $('#cc').combobox({ formatter: function(row){ var opts = $(this).combobox('options'); return row[opts.textField]; } });
loader	function(param,success,error)	Defines how to load data from remote server. Return false can abort this action. This function takes following parameters: param: the parameter object to pass to remote server. success(data): the callback function that will be called when retrieve data successfully. error(): the callback function that will be called when failed to retrieve data.	json loader
loadFilter	function(data)	Return the filtered data to display. Available since version 1.3.3.

除此之外，還有匹配中文或英文的問題，這里不討論，如果遇到請Google
但是，EasyUI並沒有為combotree提供filter屬性，也就是說沒有重寫filter方法的根據，官方文檔提到combotree就一個屬性：
The properties extend from combo and tree, below is the overridden properties for combotree.

Name	Type	Description	Default
editable	boolean	Defines if user can type text directly into the field.	false

那么，要使combotree實現查詢功能，只能通過擴展代碼，在EasyUI庫或者本地js文件中加入以下代碼：

(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);

如果在公共EasyUI庫中加入以上代碼，就可以在本地重寫query方法來實現和combobox一樣的自定義查詢效果；如果是本地可以直接更改query實現自定義。
效果如下：

總結：讓EasyUI的combobox和combotree同時支持自定義模糊查詢，在不更改其他代碼的情況下，添加以下代碼就行了：

/**
 * combobox和combotree模糊查詢
 */
(function(){
    //combobox可編輯，自定義模糊查詢
    $.fn.combobox.defaults.editable = true;
    $.fn.combobox.defaults.filter = function(q, row){
        var opts = $(this).combobox('options');
        return row[opts.textField].indexOf(q) >= 0;
    };
    //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');
            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);