Question

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

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

感谢您的赞赏并感谢您的阅读。

Answer 1

由于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之外，还有一些相关的例子，当我第一次做一些自动完成时，我大量使用了这些例子。

Answer 2

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

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

如何在Ext.js中执行html输入标记自动完成？

2 个答案: