ext combox输入智能补全,类似google搜索框

search.js

 

Ext.onReady(function() {

    var ds = new Ext.data.Store({
      proxy : new Ext.data.HttpProxy({
         url : 'Tree.jsp'
        }),
      reader : new Ext.data.JsonReader({}, [{
           name : 'pi_code'
          }, {
           name : 'pi_name'
          }])
     });

 

   var resultTpl = new Ext.XTemplate('<tpl for="."><div class="search-item">',
     '<h3><span>{pi_name}</span></h3></div></tpl>');

   

   var search = new Ext.form.ComboBox({
      id : 'com',
      store : ds,
      displayField : 'title',
      typeAhead : false,
      loadingText : 'Searching...',
      width : 100,
      // pageSize : 10,
      minChars : 0,
      mode : 'remote',
      hideTrigger : true,
      tpl : resultTpl,
      applyTo : 'name',
      itemSelector : 'div.search-item',
      onSelect : function(record) { // override default onSelect to do redirect
       Ext.getCmp('com').setValue(record.data.pi_name);
      }
     });
  });

 

 

Tree.jsp

 

String query =  request.getParameter("query");//输入内容

//以下可以进行数据库查询,输入json文本

String json = "[{pi_code:'200901', pi_name:'2009年一季度"+new Date().getTime()+"'},{pi_code:'200902', pi_name:'2009年二季度"+query+"'},{pi_code:'200903', pi_name:'2009年三季度'},{pi_code:'200904', pi_name:'2009年四季度'}]";

 

response.getWriter().write(json);
response.getWriter().close();

 

 

 

search.jsp

 <head>

      <script type="text/javascript" src="search.js"></script>

 </head>

 <body>
      <input type="text" size="40" name="search" id="search" /> 
 </body>

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值