首页 > 代码库 > Extjs3 Combo实现百度搜索查询
Extjs3 Combo实现百度搜索查询
在Extjs中实现Combo手输模糊筛选出下拉框数据。之前一直利用的Combo的keyup来实时的请求数据库进行查询。最近发现了一个更好的方式：只需要引用一个ComboBoxQuery
Ext.ns(‘Ext.plugins.ComboBoxQuery‘);Ext.plugins.ComboBoxQuery = function (config) { Ext.apply(this, config);};Ext.extend(Ext.plugins.ComboBoxQuery, Ext.util.Observable, { minChars: 1, init: function (combo) { this.combo = combo; this.combo.on(‘beforequery‘,function(qe){ var cmb = qe.combo; var q = qe.query; var forceAll = qe.forceAll; if (forceAll === true || (forceAll == undefined && cmb.mode == ‘remote‘) || (q.length >= this.minChars)) { if (cmb.lastQuery !== q) { cmb.lastQuery = q; if (cmb.mode == ‘local‘) { cmb.selectedIndex = -1; if (forceAll||q==="") { cmb.store.clearFilter(); } else { // 检索的正则 var regExp = new RegExp(".*" + q + ".*", "i"); // 执行检索 cmb.store.filterBy(function(record, id) { // 得到每个record的项目名称值 var text = record.get(combo.displayField); return regExp.test(text); }); } cmb.onLoad(); } else if (cmb.forceQueryInLocal){ if(cmb.store.getCount()>0){ this.isRemoteStoreLoaded = true; } else if(!this.isRemoteStoreLoaded){ cmb.store.load(); this.isRemoteStoreLoaded = true; } cmb.selectedIndex = -1; if(q==="") cmb.store.clearFilter(); else{ var regExp = new RegExp(".*" + q + ".*", "i"); // 执行检索 cmb.store.filterBy(function(record, id) { // 得到每个record的项目名称值 var text = record.get(combo.displayField); return regExp.test(text); }); } cmb.expand(); cmb.restrictHeight(); } else { cmb.store.baseParams[this.queryParam] = q; cmb.store.load({ params: cmb.getParams(q) }); cmb.expand(); cmb.restrictHeight(); } } else { cmb.selectedIndex = -1; cmb.onLoad(); } } return false; }); //解决当combobox的store提前加载后，再点击输入框不能自动弹出下拉框的问题 this.combo.on(‘focus‘, function(cmb){ if(!cmb.list){ cmb.initList(); } if(!cmb.isExpanded()) { cmb.expand(); cmb.restrictHeight(); } }); }});
然后在Combo中加入
var Store = new Ext.data.JsonStore({ url: ‘xxxx‘, method: ‘Post‘, root: ‘Table‘, autoLoad: true, fields: [‘Id‘, ‘Name‘]});xtype: ‘combo‘,editable: false,mode: ‘local‘,displayField: ‘Name‘,valueField: ‘Id‘,triggerAction: ‘all‘,store: Store,editable: true,plugins: [new Ext.plugins.ComboBoxQuery()],forceSelection: true,width: 250,fieldLabel: ‘测试‘
主要是 plugins: [new Ext.plugins.ComboBoxQuery()],
forceSelection: true, 这两句代码。
plugins引用插件，
forceSelection：true输入只能是combo的数据源里存在的数据。
以上版本只在Extjs3的测试使用。
欢迎Extjs使用者加入QQ群：460607949一起交流学习。
Extjs3 Combo实现百度搜索查询
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。