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上