首字母快速查询[防百度输入关联]EXT实现

要实现一个在输入框中输入几个相关文字的首字母，然后再据首字母查询出相关联的信息，功能页面如下：

操作方法：在输入框中输入字母，然后点击＂搜索＂，在后台方法，根据首字母关联相关信息，在下面显示．

EXT代码如下：

 

 

Ext.BLANK_IMAGE_URL='../../ext-3.2.0/resources/images/default/tree/s.gif'; Ext.onReady(function(){ var Res_sm=new Ext.grid.CheckboxSelectionModel(); var reader = new Ext.data.JsonReader({ idProperty:'ID', fields: [ {name:'TB_ID', type:'int'}, {name:'TB_NAME',type:'string'}, {name:'ID', type:'string'}, {name:'FIELD0', type:'string'}, {name:'FIELD1', type:'string'}, {name:'FIELD2', type:'float'}, {name:'FIELD3', type:'string'}, {name:'TPSL', type:'string'}, {name:'READYSL',type:'float'} ], root:'data', remoteGroup:true, remoteSort: true }); var proxy = new Ext.data.HttpProxy({ method: 'GET', url: 'xxx.aspx?action=initInfo') }); //数据源 var ds = new Ext.data.GroupingStore({ reader: reader, proxy: proxy, //分组字段 groupField:'TB_NAME' }); //数据容器 var Res_readygrid = new xg.EditorGridPanel({ border:false, id:'Res_readygrid', clicksToEdit:1, autoWidth:true, stripeRows:true, viewConfig:{forceFit:true}, animCollapse: false, trackMouseOver: false, frame:true, ds:ds, sm:Res_sm, columns: [ Res_sm, {id: 'FIELD0',header: '名称',width: 80,sortable: true,dataIndex: 'FIELD0',hideable: false} ,{header: 'TB_NAME',width: 20,sortable: true,dataIndex: 'TB_NAME'} ,{id:'FIELD2',header: '数量',width: 40,sortable: true,dataIndex: 'FIELD2'} ,{id: 'FIELD1',header: '单位',width: 40,sortable: true,dataIndex: 'FIELD1',hideable: false} ,{id: 'READYSL',header: '已调配数量',width: 50,sortable: true,dataIndex: 'READYSL'} ,{id: 'FIELD3',header: '存放地点',width: 80,sortable: true,dataIndex: 'FIELD3'} ,{id: 'TPSL',header: '调配数量',width: 40,sortable: true,dataIndex: 'TPSL',editor: new Ext.form.NumberField({allowBlank: false,allowNegative: false,emptyText:1,style: 'text-align:left'})} ], view: new Ext.grid.GroupingView({ forceFit:true, showGroupName: false, enableNoGroups:false, enableGroupingMenu:false, hideGroupedColumn: true }), //工具栏：输入框，＂搜索＂按钮 tbar : [ { xtype:'textfield', width:80, allowBlank:true, name: 'match', id: 'match' }, { text:'搜索', handler:function(){ var str = Ext.getCmp('match').getValue(); //重新加载数据源 proxy.setUrl('xxx.aspx?action=matchResName&str='+encodeURI(str)); ds.reload(); } } ] }); Res_readygrid.store.load(); var viewport = new Ext.Viewport({ border:false, layout:'fit', id:'view', items:[{ region:'center', split: true, autoWidth:true, border:false, style:'border:1px solid #FFA938;border-top:0px none;', items:[Res_readygrid] }] }); function selSuccess(response,option) { var obj = Ext.util.JSON.decode(response.responseText); if(obj.success) { var grid = Ext.getCmp('Res_readygrid'); grid.store.reload(); Ext.Msg.alert('友情提示',obj.msg); } else { Ext.Msg.alert('异常提示',obj.err);} } function selFail(response,option) { Ext.Msg.alert('提示','操作出现异常'); } });  

其中后台接收＂matchResName＂事件，在方法中重新获得数据如下：

　string action = Request.Params["action"]; 　if (action == "matchResName") 　　{ string res_name = Request.Params["str"]; //注意:f_getspell为oracle获取汉字拼音与拼音首字母的一个方法 　　　string sql="select * from xxx where f_getspell(field0) like '%" + res_name + "%'"; Datatable dt=dbHelpSql.query(sql); //dbHelpSql为数据库操作类　　 　　 string data = "data:["; if (dt != null && dt.Rows.Count > 0) { foreach (DataRow row in dt.Rows) { data += "{"; foreach (DataColumn column in dt.Columns) { data += column.ColumnName + ":'" + row[column].ToString() + "',"; } data = data.Substring(0, data.Length - 1); data += "},"; } data = data.Substring(0, data.Length - 1); } data += "]"; Response.Write(data); Response.End(); } 

　　注：主要是在SQL语句中使用oracle的f_getspell(字段)方法，获得首字母，然后与参数匹配．