Ext的comboBox结合Servlet、JSON实现AutoComplete

json java query 应用服务器 function

     这是一个利用Ext.form.field.ComboBox实时获取数据的例子，这个combo必须是可以编辑的，在编辑的过程中通过输入的关键词去后台获取相关的数据。由于combo在自身的代码实现中已经实现了autocomplete的功能，只不过没有着重的表达出来，不过我们还是还是可以通过代码挖掘出来。这个是从一个官方的例子衍生而来的，官方的例子还是很全面的。下面我们看具体实现，前端JS代码：

[javascript] view plain copy

1. Ext.onReady(function() {  
2.   
3.     Ext.define("Resource", { //定义一个数据模型  
4.                 extend : 'Ext.data.Model',  
5.                 fields : [{  
6.                             name : 'text',  
7.                             mapping : 'text'  
8.                         }, {  
9.                             name : 'iconCls',  
10.                             mapping : 'iconCls'  
11.                         }]  
12.             });  
13.   
14.     ds = Ext.create('Ext.data.Store', { //定义数据源  
15.                 model : 'Resource',  
16.                 proxy : {  
17.                     type : 'ajax',  
18.                     url : 'autocomplete', //获取数据的路径  
19.                     reader : {  
20.                         type : 'json',  
21.                         root : 'root',  
22.                         totalProperty : 'total'  
23.                     }  
24.                 }  
25.             });  
26.   
27.     panel = Ext.create('Ext.panel.Panel', {  
28.         renderTo : Ext.getBody(),  
29.         title : '查找资源',  
30.         width : 600,  
31.         bodyPadding : 10,  
32.         layout : 'anchor',  
33.         items : [{  
34.             xtype : 'combo',  
35.             store : ds,  
36.             displayField : 'text',  
37.             typeAhead : false,  
38.             hideLabel : true,  
39.             hideTrigger : true,  
40.             anchor : '100%',  
41.             minChars : 1, //定义输入最少输入多少个字符的时候获取数据  
42.             listConfig : {  
43.                 emptyText : '<div style="line-height:22px;padding:2px 10px">没有找到匹配的数据</div>',  
44.                 getInnerTpl : function() { //通过数据模型定义的内容，自定义展示内容  
45.                     return '<div class="search-item" >'  
46.                             + '<div class="x-tree-icon x-tree-icon-leaf search-item-icon  {iconCls}"></div>'  
47.                             + '{text}' + '</div>'  
48.                 }  
49.             }  
50.         }, {  
51.             xtype : 'component',  
52.             style : 'margin-top:10px',  
53.             html : '输入关键词，实时查找后台数据。'  
54.         }]  
55.     });  
56. });  

     后台Java代码：

[java] view plain copy

1. request.setCharacterEncoding("UTF-8");  
2.         String query = request.getParameter("query"); //关键词默认参数名是query，如果需要自定义可以在combo配置  
3.         //通过模糊查询获取数据，这里只是粗略的处理。其实整个功能这里才是最精细和关键的，如处理拼音的问题  
4.         List<JSONObject> list = BaseDAO.findBySql("select t.text,t.iconCls "   
5.                 + " from resource t " + " where t.text like '%" + query.trim() + "%'");  
6.         PageWriter.output(list, response);  

     输出的数据格式是JSON， 在传递中文的时候，注意tomcat或其他应用服务器对于中文的处理。

   QQ讨论群：197331959， http://www.hatustudio.com  Leetop/Ext项目论坛

   http://download.csdn.net/detail/leecho571/4343627 实例下载，里面有个app.sql的数据库文件，用mysql数据库导入即可