Extjs 3实现Combobox下拉列表的拼音过滤

下拉列表是我们常用的表单元素,能够通过选项的方式代替手动输入,提高输入效率和准确率.但有时侯,如果下拉列表中选项过多,在选择中就会造成不便,降低输入效率.

比如12306火车票订票系统中,发站和到站框中,从下拉列表中选择就非常困难.在日常使用中经常使用输入文字拼音首字母(简拼、音序)的方式进行可选项的过滤,现在我们尝试在Extjs3中使用这种方式,Extjs其他版本可参考.

要通过汉字得到对应的拼音,方式是多种多样的.第一种是在数据库中加字段保存可选项的简拼,这种方式需要操作人员手动维护可选项的简拼,也许不是大家希望的方式.

除此而外就需要在代码中进行翻译,要么在后台代码中,要么在前台页面中.现在提供一种在前台进行处理的方式.可以下载一个javascript写的汉字转拼音的代码小工具.调用其中函数就可以达到需要的目的(可惜对多音字没有太好的办法).

JavaScript文件下载地址:http://files.cnblogs.com/cnscoo/ChinesePY.js

引用chinesePY.js文件,加入项目时注意编码格式,如果乱码了就不能翻译了.下面开始写代码:

var testStore = new Ext.data.Store({

proxy : new Ext.data.HttpProxy({

url : 'formDemo.do?reqCode=queryAreaDatas'// 后台查询获取可选项

}),

reader : new Ext.data.JsonReader({}, [{

name : 'value'

}, {

name : 'text'

}]),




listeners : {

load : function(pStore, option) {// 加载时将每一项record的text翻译为简拼

pStore.each(function(record) {

var text = record.get('text');

var code = Pinyin.GetJP(text);// 获取汉语，调用函数得到对应的简拼

record.set('code', code);

})

}

}

});




testStore.load();

var testCombo = new Ext.form.ComboBox({

hiddenName : 'testCombo',

fieldLabel : '行政区域',

emptyText : '请选择...',

triggerAction : 'all',

store : testStore,

displayField : 'text',

valueField : 'value',

loadingText : '正在加载数据...',

mode : 'local',

forceSelection : true,

typeAhead : true,

resizable : true,

editable : true,

anchor : '100%',

listeners : {

focus : {

fn : function(e) {

e.expand();

this.doQuery(this.allQuery, true);

},

buffer : 200

},

beforequery : function(e) { // 在文本框内输入拼音时，根据store内code进行过滤，在下拉列表中只显示拼音匹配的选项

var combo = e.combo;

if (!e.forceAll) {

var input = e.query;

var regExp = new RegExp("^" + input + ".*",

"i");

combo.store.filterBy(function(record, id) {

var text = record.get('code');

return regExp.test(text);

});

combo.expand();

combo.select(0, true);// 将光标默认指向下拉列表的第一项，这样在取到合适的选项时，通过上下方向键和回车就可以选中需要的结果

return false;

}

}

}

});

执行效果如下图: