Extjs 3实现Combobox下拉列表的拼音过滤
2015-02-10 09:02
330 查看
下拉列表是我们常用的表单元素,能够通过选项的方式代替手动输入,提高输入效率和准确率.但有时侯,如果下拉列表中选项过多,在选择中就会造成不便,降低输入效率.
比如12306火车票订票系统中,发站和到站框中,从下拉列表中选择就非常困难.在日常使用中经常使用输入文字拼音首字母(简拼、音序)的方式进行可选项的过滤,现在我们尝试在Extjs3中使用这种方式,Extjs其他版本可参考.
要通过汉字得到对应的拼音,方式是多种多样的.第一种是在数据库中加字段保存可选项的简拼,这种方式需要操作人员手动维护可选项的简拼,也许不是大家希望的方式.
除此而外就需要在代码中进行翻译,要么在后台代码中,要么在前台页面中.现在提供一种在前台进行处理的方式.可以下载一个javascript写的汉字转拼音的代码小工具.调用其中函数就可以达到需要的目的(可惜对多音字没有太好的办法).
引用chinesePY.js文件,加入项目时注意编码格式,如果乱码了就不能翻译了.下面开始写代码:
执行效果如下图:
比如12306火车票订票系统中,发站和到站框中,从下拉列表中选择就非常困难.在日常使用中经常使用输入文字拼音首字母(简拼、音序)的方式进行可选项的过滤,现在我们尝试在Extjs3中使用这种方式,Extjs其他版本可参考.
要通过汉字得到对应的拼音,方式是多种多样的.第一种是在数据库中加字段保存可选项的简拼,这种方式需要操作人员手动维护可选项的简拼,也许不是大家希望的方式.
除此而外就需要在代码中进行翻译,要么在后台代码中,要么在前台页面中.现在提供一种在前台进行处理的方式.可以下载一个javascript写的汉字转拼音的代码小工具.调用其中函数就可以达到需要的目的(可惜对多音字没有太好的办法).
JavaScript文件下载地址:http://download.csdn.net/download/aknifing/8434875
引用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; } } } });
执行效果如下图:
相关文章推荐
- javascript实现通过拼音首字母快速选择下拉列表
- 使用EXT实现ComboBox多列下拉列表
- javascript实现下拉列表框显示(输入拼音头显示选项)
- jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
- 利用js和css实现Bootstrap下拉列表数据过滤
- 在ExtJS的ComboBox组件中实现下拉树效果
- 可输入可联想的下拉列表的实现——Ext ComboBox
- ExtJs 入门教程十[下拉列表:Combobox]
- extjs combobox 仿百度查询功能,设置下拉列表宽度
- ExtJs 入门教程十一[下拉列表:Combobox]
- 可输入可联想的下拉列表的实现——Ext ComboBox
- 扩展Ext的Combobox实现多选下拉列表
- 扩展Ext的Combobox实现多选下拉列表
- ExtJS ComboBox 下拉列表详细用法
- 在ExtJS的ComboBox组件中实现下拉树效果
- ExtJs——ComboBox(下拉列表、从后台读取数据、带分页)!!!
- 无废话ExtJs 入门教程十一[下拉列表:Combobox]
- 无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two]
- jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
- 重写winform 的 ComboBox控件实现自动加载磁盘下拉列表框