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