ExtJs-ComboBox按拼音首字母进行过滤-CSDN博客

1、引用 chinesePY.js 文件，下载地址 http://download.csdn.net/detail/gj_diy/8988705

注：这个js编码有点问题，自己改成 utf-8 的，不然汉字无法获取首字母

2、在下拉数据来源中添加一个 key，value为 Pinyin.GetJP(str)

	listeners : {// 这是Store的监听，给数据添加转换好的简拼
	 
		load : function(pStore, option) {// 加载时将每一项record的text翻译为简拼
	 
			pStore.each(function(record) {
	 
				var text = record.get('text');
	 
				var code = Pinyin.GetJP(text);// 获取汉语，调用函数得到对应的简拼
	 
				record.set('code', code);
	 
			})
	 
		}
	 
	}

3、给下拉框添加监听事件

	this.comboType = new Ext.form.ComboBox({
		name : 'comboType',
		hiddenName : 'comboType',
		fieldLabel : '扫描类型',
		store : _this.typeStore,
		mode : 'local',
		valueField : "value",
		displayField : "name",
		forceSelection : true,
		typeAhead : true,// 这个属性也是模糊检索，不过是要输入汉字
		forceSelection : true,
		triggerAction : 'all',
		allowBlank : false,
		blankText : '扫描类型不能为空',
		width : 120,
		listeners : {
			focus: {//这个是将焦点放到这个下拉框，如果没有这个，你需要手动点击下下拉框，再输入才能实现这个效果
	            fn: function (e) {  
	                e.expand();  
	                this.doQuery(this.allQuery, true);  
	            },  
	            buffer: 200  
	        },
			'beforequery':function(e){
				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;
				}
            },
		}
	});

执行效果：