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

Question

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

更准确地说,如何基于迭代Ajax请求自动完成(如jQuery自动完成插件,其中Ajax选项设置为更新URL).

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

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文档的强大功能.除了组合框样本之外,还有一些相关的例子,当我第一次做一些自动完成时,我大量使用了这些例子.

Answer 2

没有单独的自动完成功能可以一般性地附加到输入 - 您只需使用带有服务器端过滤的ComboBox控件(您可以使用"hideTrigger:true"配置,使其看起来仍然像普通输入).这可能是你想要的最接近的例子:

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