Extjs3 Combo实现百度搜索查询

Posted 2020-08-22

在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();
            }
        });
    }
});

View Code

然后在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一起交流学习。