其实这个分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 }