Extjs combobox下拉框模糊匹配

作者: tcxurun 分类: Web前端 发布时间: 2015-05-22 23:26 ė 6 没有评论

Extjs combobox下拉框模糊匹配

Ext中的combobox有属性typeAhead:true 可以实现模糊匹配,但是是从开始匹配的,如果需要自定的的匹配,则需要监听beforequery方法,实现自己的匹配查询方法,开始是如下写法,

        beforequery : function(e) {
            var combo = e.combo;
            if (!e.forceAll) {
                var input = e.query;

                var regExp = new RegExp(".*"
                        + input + ".*");
                // 执行检索
                combo.store.filterBy(function(
                        record, id) {
                    // 得到每个record的项目名称值
                    var text = record
                            .get(combo.displayField);
                    return regExp.test(text);
                });
                combo.expand();
                return false;
            }
        }

但是这种方法第一次输入时会不显示结果,需要点一下下拉框后查询才会生效,修改triggerAction和mode属性都不行 后来进行修改,将beforequery中代码修改为如下即可:

beforequery : function(qe) {
    var combo = qe.combo;
    var q = qe.query;
    var forceAll = qe.forceAll;
    if (forceAll === true || (q.length >= this.minChars)) {
        if (this.lastQuery !== q) {
            this.lastQuery = q;
            if (this.mode == 'local') {
                this.selectedIndex = -1;
                if (forceAll) {
                    this.store.clearFilter();
                } else {
                    // 检索的正则
                    var regExp = new RegExp(".*" + q + ".*","i");
                    // 执行检索
                    this.store.filterBy(function(record,id) {
                        // 得到每个record的项目名称值
                            var text = record.get(combo.displayField);
                            return regExp.test(text);
                        });
                }
                this.onLoad();
            } else {
                this.store.baseParams[this.queryParam] = q;
                this.store.load({
                    params : this
                            .getParams(q)
                });
                this.expand();
            }
        } else {
            this.selectedIndex = -1;
            this.onLoad();
        }
    }
    return false;
}

本文出自天一直很蓝,转载时请注明出处及相应链接。

本文永久链接: http://www.tcxurun.cn/archives/380

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Ɣ回顶部