Javascript 将建议值从ext组合框呈现到DOM中的元素

我有一个ext组合框，它使用一个商店在用户键入值时向用户建议值

可在此处找到一个示例：

---

是否有办法将建议的文本列表呈现给DOM中的元素。请注意，我指的不是“applyTo”配置选项，因为这将呈现整个控件，包括DOM元素的文本框。

因此，请澄清，您希望所选文本呈现在文本输入正下方之外的其他位置。对吗

ComboBox只是一个文本输入和可选触发器按钮的组合。对于你想要的东西没有一个官方的选择，破解它让它做你想做的事情将是非常痛苦的。因此，最简单的操作过程（除了查找和使用其他库中的某个组件完全满足您的需要）是使用上述组件构建您自己的库：

创建一个文本框。如果需要，可以使用，并观察keyup事件

创建绑定到存储的DataView，并呈现到所需的任何DOM元素。根据您的需要，收听“selectionchange”事件，并根据选择采取您需要的任何行动。e、 例如，Ext.form.Hidden（或纯HTML输入type=“Hidden”元素）上的setValue

在keyup事件侦听器中，调用存储的筛选方法（请参阅），从文本字段传递字段名和值。e、 例如，store.filter（'name'，新正则表达式（值+'.*））

---

这需要更多的工作，但比从头开始编写自己的组件或修改组合框使其符合您的要求要短得多。

您可以为此使用插件，因为您可以在插件中调用甚至覆盖私有方法：

var suggested_text_plugin = {

    init: function(o) {

        o.onTypeAhead = function() {
            // Original code from the sources goes here:

            if(this.store.getCount() > 0){
                var r = this.store.getAt(0);
                var newValue = r.data[this.displayField];
                var len = newValue.length;
                var selStart = this.getRawValue().length;
                if(selStart != len){
                    this.setRawValue(newValue);
                    this.selectText(selStart, newValue.length);
                }
            }

         // Your code to display newValue in DOM
         ......myDom.getEl().update(newValue);
        };
    }
};


// in combobox code:

var cb = new Ext.form.ComboBox({
    ....
    plugins: suggested_text_plugin,
    ....
});

我认为甚至可以创建一个完整的方法链，在您的方法之前或之后调用原始方法，但我还没有尝试过

另外，请不要因为我使用非标准插件定义和调用方法（未记录）而对我施加压力。这只是我看待事物的方式

编辑：

我认为方法链可以这样实现（未经测试）：

@Thevs

我认为你的思路是对的

我所做的是重写Combobox的initList方法

    Ext.override(Ext.form.ComboBox, {
    initList : function(){

如果您查看代码，您可以看到它将建议列表呈现给dataview的位置。因此，只需将apply设置为所需的dom元素：

            this.view = new Ext.DataView({
            //applyTo: this.innerList,
            applyTo: "contentbox",

@魁

嗯。我认为您需要一个额外的DOM字段（除了现有的combo字段之外）

但是你的解决方案会覆盖ComboBox类中的一个方法，不是吗？这将导致所有组合框都呈现到同一个DOM。使用插件只会覆盖一个特定实例。

@qui

---

另外要考虑的是，IntLIST不是API的一部分。这种方法可能会消失，或者行为可能会在未来的Ext版本中发生重大变化。如果您从未计划升级，那么您就不必担心。

您可能是对的，但是在这种情况下，我肯定只使用一个组合框，所以这并不重要：）谢谢您的建议

            this.view = new Ext.DataView({
            //applyTo: this.innerList,
            applyTo: "contentbox",