让Combox的自动完成支持模糊查询

 

EXTJS提供的COMBOX有一个自动完成的功能 ，就是你只要输入头几个字，那么以这几个字开头的所有列表项都会显示出来供你选。但是有一个缺陷，就是COMBOX只会按照头几个字严格去匹配， 而如果想模糊查询，就不行了。

比如，我有一个保存了所有客户公司名称的COMBOX，我记不得某个公司的全名，但我知道这个公司大概叫“百邦”，那么我只要在COMBOX中输入“百邦”，即可查出所有包含“百邦”的公司。实现代码如下。

 

//combox用到的store

comboxVendorStore=new Ext.data.JsonStore({

url:'/pcms/dictionary/vendor.do?method=find',

root:'Datas',

totalProperty: 'TotalRecords',

fields:[

{name:'vendorId', mapping:'vendorId'},

{name:'shortName', mapping:'shortName'}

]

});

 

 

var PagevendorCombox=new Ext.form.ComboBox({

name:'vendorId',

       fieldLabel:'供货单位',

         store: comboxVendorStore,

       displayField:'shortName',

         valueField:'vendorId',

         emptyText:'请选择',

         width:160,

         listWidth:400,

         minHeight:100,

         editable:true,

         allowBlank:false,

         mode:'local', 

         loadingText:'loading...',

         hiddenName:'vendorId',

         selectOnFocus: true,

         triggerAction:'all',

enableKeyEvents:true,

         listeners:{

         keypress:function(t,e){

//这里判断空格，即输入“百邦”后，敲击空格键才进行查询，防止无条件的查询拖累服务器。

         if(e.getKey()==e.SPACE){

         comboxVendorStore.load({params:{query:PagevendorCombox.getEl().getValue(),start:0,limit:100000}});//这里取Combox内容的方法需要注意，是用HTML元素的方式去取。取后通过query传递给后台，这个query参数里放的就是“百邦”两字，后台根据此进行模糊查询并返回相应的结果。

         }

         }

         }

});

comboxVendorStore.load({params:{start:0,limit:100000}});