Ext js 下拉框模糊匹配查询，并支持反复输入检索

记录一下Ext js开发中遇到的下拉框检索需求。

        由于数据多，Extjs的组件下拉框显示数据多，不好选择，需要能在输入框输入字段，然后下拉框只显示输入字段相关的内容，进行一个模糊查询，并且能够支持反复匹配显示相关的内容。

        最终找到相关的关键性操作：combo.store.filterBy，使用store的过滤器方法。

以下为具体代码：

"类型 ",{
    xtype:"combo",//combo为下拉框组件
    width:150,
    id:'kind',
    store:getStore(true),//我这里写了方法来获取store，这里的store是你的下拉框数据来源
    editable: true,//输入框是否可以编辑输入
    displayField: "name",
    valueField: "kind",
    triggerAction : 'all',
    mode:'local',//remote为远程，local为本地
    forceSelection: true,
    typeAhead : true,
    minChars :4,//自动完成激活之前填入的最小字符
    queryDelay : 500,//查询延时，毫秒
    listeners:{ //监听器，并使用beforequery属性，来使其在点击查询按钮前触发，即不需要设置以
                //及点击查询按钮，输入框输入后即可自动触发显示相关的内容
        'beforequery' : function (e) {
            var combo = this,
                size = 15,
                idx = 1;
            if (e.query === '' || e.query == null ) {//当输入框删除内容后，清除过滤器，
                                                     //显示原本store数据,使其能够再次检索
                combo.store.clearFilter();
                combo.expand();
            }else {
                if (!e.forceAll) {
                    combo.store.clearFilter();//使每次输入都能进行检索，不用担心输入过慢
                    var input = e.query;
                    // 检索的正则
                    var regExp = new RegExp(".*" + input + ".*");
                    // 执行检索
                    combo.store.filterBy(function (record, id) {
                        if (idx > size) {
                            return false;
                        }
                        var text = record.get(combo.displayField);
                        var flag = regExp.test(text);
                        if (flag) {
                            idx++;
                        }
                        return flag;
                    });
                    combo.expand();
                    return false;
                }
            }
        }
    }
}

        最后，下拉框检索功能完成，如果要实现多选，可添加属性multiSelect: true，如果要改变多选时的分隔符(从默认的逗号改为分号)，可添加属性delimiter: ';'来修改分隔符。