extjs combobox实现自动搜索功能的方法

extjs | 2019-09-13 10:02:39

其实这个分2种情况,前端搜索和后端搜索
第一种就是你的候选项是固定的,比如说我的combobox的下拉选择是56个名族的名称,我输入“布”,就想下拉选择框出现“布依族”“布朗族”,如果不输入,下拉框就出现全部的选项。
第二种情况就是像百度搜索一样,不输入就没有,随便输入一个关键字词,就出现相应的选择内容。


实现方法:


首先第一种情况前端搜素:


很简单,combobox的数据是固定的加载进来就可以了,然后加上forceSelection:true, selectOnFocus: true, 这2个属性。就可以了。


var combo = new Ext.form.ComboBox({
forceSelection:true,//必须选择一个选项,这个比较重要,输入后就自动按照输入值给你选中了相同的选项,这样提交的值就是你选项中的值。
selectOnFocus: true, //获得焦点的时候就选中
    typeAhead: true,
editable :true,
    triggerAction: 'all',
    lazyRender:true,
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]
    }),
    valueField: 'myId',
    displayField: 'displayText'
});





是的只要加上forceSelection:true, selectOnFocus: true, 这2个属性。就可以了。



第二种情况后端搜素:


也很简单,每次都从后台加载选项数据。直接上代码


  

{
   xtype : 'combo',
   triggerAction : 'all',
   forceSelection : true,
   autoSelect:false,
   editable : true,//这项必须为true
   minChars:1,
   queryParam : 'paramName',//如自动搜索功能必须加上queryParam配置项。查询的名称(store的baseParam 名称)它将被在查询字符串中被传递
   store :new Ext.data.JsonStore({
     fields : [ 'paramName','paramValue'],
     root : 'rows',
     url : 'xx.action'
          }),
   name : 'paramName',
   ref:'../param',
   typeAhead: false,
   loadingText :'正在加载',
   mode : 'remote',
   valueField : 'paramValue',
   displayField : 'paramName',
   hiddenName:'paramName',
   width:300
  }



登录后即可回复 登录 | 注册
    
关注编程学问公众号