键入时搜索组合框

Search-as-you-type Combobox

我完全不熟悉 php 编码,具有 html 的基础知识。

尽管如此,我还是接到了 simple 改进我们网站公司表单页面的任务。正如您可能意识到的那样,它是用 php 编写的。

其中一项任务包括 向包含供应商列表的文本输入组合框添加 'search-as-you-type' 函数。根据我的代码分析,我认为这个技巧应该在这个代码片段中实现:

 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, which seems like my coding but they are not talking about searching and matching values; this example which shows what I am trying to achieve (just the "Starting With" option would be perfect) and this 文档,它给了我一些有趣的方法,比如 FindRecordByValue(value),但我不知道如何正确使用它。

如有任何帮助,我们将不胜感激。 干杯,

--更新--:

我注意到我的表单的其他一些字段已经具有这种过滤功能。我不能对上述情况做同样的事情的原因是因为 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

});