标签：
下拉列表是我们常用的表单元素,能够通过选项的方式代替手动输入,提高输入效率和准确率.但有时侯,如果下拉列表中选项过多,在选择中就会造成不便,降低输入效率.
比如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;
}
}
}
});
执行效果如下图:
标签：
原文地址：http://blog.csdn.net/aknifing/article/details/43669851
