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;
}