搜索即用型Combobox

Posted 2021-03-29

我对php编码完全陌生，具有html的基本知识。

尽管如此，我还是获得了改善我们网站公司表单页面的simple任务。它是用PHP编写的，你可能已经意识到了。

其中一项任务包括向包含供应商列表的文本输入组合框添加“按需搜索”功能。从我的代码分析，我相信这个技巧应该在这段代码中实现：

 var storeSupplier = new Ext.data.JsonStore({
     url: 'php/selectSupplier.php',
     root: 'results',
     fields: ['idSupplier', 'nameSupplier']
 });

 selectSupplier = new Ext.form.ComboBox({
     width: 250,
     xtype: 'combo',
     mode: 'remote',
     triggerAction: 'all',
     editable: false,

     fieldLabel: 'Supplier',
     name: 'nameSupplier',
     displayField: 'nameSupplier',
     valueField: 'idSupplier',
     hiddenName: 'idSupplier',
     store: storeSupplier
 });

我已经研究了一些php文档和其他解决方案，但我无法理解也无法适应我的情况。我得到的最接近的是this Q＆A，这看起来像我的编码，但他们不是在谈论搜索和匹配值; this示例显示了我想要实现的内容（只是“开始使用”选项将是完美的）和this文档，它给了我一些有趣的方法，如FindRecordByValue（值），但我不知道如何正确使用它。

任何帮助，将不胜感激。干杯，

--UPDATE--：

我注意到我的表单中的其他一些字段已经具有这种过滤功能。我之所以不能对上述情况做同样的原因是因为mode:remotestatus. The ones that are working are stated asmode：local。

当我尝试以下方法时，我根本没有显示任何值：

listeners: {
    'keyup': function() {
        this.store.filter('nameSupplier', this.getRawValue(), true, false);
    },
    'beforequery': function(queryEvent) {
        queryEvent.combo.onLoad();
        queryEvent.combo.expand();
        // prevent doQuery from firing and clearing out my filter.
        return false;
    }
}

答案

老实说，我仍然想知道为什么它有效，但是，我已经设法通过在我正在使用的商店的声明中添加以下代码行来解决问题：

var storeSupplier = new Ext.data.JsonStore({
        url: 'php/selectSupplier.php', 
        autoLoad: true, // <<<<<<<<<<<<<<<<<<<ADDED THIS LINE
        root: 'results', 
        fields: ['idSupplier','nameSupplier']
});

selectSupplier = new Ext.form.ComboBox({
        width:          250,
        xtype:          'combo',
        mode:           'remote',
        triggerAction:  'all',
        editable:       true, // <<<<<<<<<<<<<<<<<<CHANGED THIS ONE

        fieldLabel:     'Supplier',
        name:           'nameSupplier',
        displayField:   'nameSupplier',
        valueField:     'idSupplier',
        hiddenName:     'idSupplier',
        store:  storeSupplier

});