Extjs combobox下拉框模糊匹配

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;
}
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇