如何在 Ext.js 中自动完成 html 输入标签？答案

【问题标题】：How would one do html input tag autocomplete in Ext.js?如何在 Ext.js 中自动完成 html 输入标签？
【发布时间】：2010-11-21 17:33:55
【问题描述】：

如果您使用的是 Ext.js 库，如何在输入文本区域中自动完成？

更准确地说，如何根据迭代的 Ajax 请求进行自动完成（例如 jQuery autocomplete plugin，其中 Ajax 选项设置为更新 url）。

感谢您的阅读并感谢您的想法。

【问题讨论】：

标签： ajax extjs autocomplete

【解决方案1】：

没有单独的自动完成功能可以一般附加到输入 - 您只需使用带有服务器端过滤的 ComboBox 控件（您可以使用“hideTrigger：true”配置，使其看起来仍然像普通输入）。这可能是您想要的最接近的示例：

http://extjs.com/deploy/dev/examples/form/forum-search.html

【讨论】：

另外，我认为它也可以设置为本地过滤。
感谢 bmoeskau 的输入。我已经提供了一个赏金，看看我能不能得到一两个例子。

【解决方案2】：

由于 bmoueskau 提供了一个功能齐全的实现，我认为一个更简单的示例可能会有所帮助。

var store = new Ext.data.JsonStore({
    url: '/your/ajax/script/',
    root: 'data',  // the root of the array you'll send down
    idProperty: 'id',
    fields: ['id','value']
});

var combo = new Ext.form.ComboBox({
    store: store,
    displayField:'value',
    typeAhead: true,
    mode: 'remote',
    queryParam: 'query',  //contents of the field sent to server.
    hideTrigger: true,    //hide trigger so it doesn't look like a combobox.
    selectOnFocus:true,
    width: 250,
    renderTo: 'autocomplete'  //the id of the html element to render to.
                              //Not necessary if this is in an Ext formPanel.
});

商店将接受来自您服务器的响应，格式如下：

{
    "success": true,
    "data": [
        {
            "id": 10,
            "value": "Automobile"
        },
        {
            "id": 24,
            "value": "Autocomplete"
        }
    ]
}

当然，如果这更符合您的风格，您也可以使用 Ext.data.XMLReader 设置您的商店。

我希望这能让你开始。我怎么强调Ext documentation 的厉害都不过分。除了combobox samples 之外，它还有一些相关示例，我在第一次制作一些自动完成程序时大量使用了它。

【讨论】：