Extjs combobox下拉框模糊匹配

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

// 判断某个值str是否存在store里,field是store的字段
var checkIfInStore = function(str, store, field, ignoreCase) {
    var count = store.getCount();
    for( var i = 0; i < count; i++) {
        var val = store.getAt(i).get(field);
        if (ignoreCase) {
            str = str.toUpperCase();
            val = val.toUpperCase();
        }
        if (str == val) {
            return true;
        }
    }
    return false;
};
 
var ComboSearchPlugin = {
    init: function(combo) {
        combo.addListener('blur', function(combo) {
            // 如果没有写完整则设置为空
            var isValid = checkIfInStore(combo.getRawValue(), combo.store, combo.displayField, false);
            if (!isValid) {
                combo.setValue('');
            }
        });
 
        combo.addListener('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://weibaojun.iteye.com/blog/1098731
原文我试了一下有问题,第一次输入时会不显示结果,主要差别在onLoad上




fatkun

3条评论

检索正则表达式:var regExp = new RegExp(“.*” + q + “.*”, “i”);
此处会有Gug。
若在对话框中输入 ( ) [ ] 等特殊字符,会导致正则式错误,
我的处理办法是
q.replace(/[^\w\u4e00-\u9fa5]/g,”);
这样过滤q只能是字母,数字,中文

我后面改用 indexOf来判断了。对于正则表达式,我想可以对特殊字符替换,进行转义。。例如替换(为\(等。。不过也挺麻烦的。。

发表评论

电子邮件地址不会被公开。