键入时搜索组合框

Posted 2023-02-26

【中文标题】键入时搜索组合框

【英文标题】：Search-as-you-type Combobox

【发布时间】：2015-07-06 15:30:03

【问题描述】：

我是 php 编码的新手，对 html 有基本的了解。

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

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

 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(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;
    

【问题讨论】：

你真的需要使用 ExtJs 还是 jQuery 也不错？

好吧，我只是在跟进另一个人以前的编码。由于 php 或 javascript 或任何其他语言是我的专业领域，我正在尝试找出解决问题的最简单方法。

您查看过官方的“厨房水槽”示例吗？像这些：Remote query mode 和 Remote loaded, local query mode

很好的例子，第一个正是我一直在寻找的。但是，再次，我无法实现它，因为重新加载商店时我的查询丢失了，这似乎每次我按下一个新键时都会发生。有趣的事实是，如果我输入查询并按 DELETE，它会神奇地显示我期望的结果。

【参考方案1】：

老实说，我仍然想知道它为什么会起作用，但尽管如此，我还是设法通过在我正在使用的商店的声明中添加以下代码行来解决这个问题。：

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

);