首字母快速查詢[防百度輸入關聯]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(字段)方法，獲得首字母，然後與參數匹配．