如何在Ext.js中自动完成html输入标签？ [英] How would one do html input tag autocomplete in Ext.js?

问题描述

如果您使用Ext.js库，那么在输入文本区域中如何进行自动填充？

If you're using the Ext.js library, how does one do autocomplete in input text areas?

更准确地说，如何根据迭代进行自动填充Ajax请求（如 jQuery自动完成插件，其中Ajax选项设置为更新网址

More precisely, how would one do autocomplete based on iterative Ajax requests (like the jQuery autocomplete plugin where the Ajax option is set to an updating url).

感谢您的阅读。

推荐答案

由于bmoueskau提供了一个相当全功能的实现，我认为一个更加裸机的例子可以帮助。

Since bmoueskau provided a quite full featured implementation, I thought a more bare-bones example could help.

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.
});

商店将接受您的服务器的回复，格式如下：

The store will accept responses from your server formatted like this:

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

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

Of course, you could also set up your store with an Ext.data.XMLReader if that's more your style.

希望能让你开始。我不能强调 Ext documentation 。除了组合框示例之外，还有一些相关示例当我第一次制作一些自动填充程序时，使用量很大。

I hope that gets you started. I can't stress enough the awesomeness of the Ext documentation. It's got some pertinent examples in addition to the combobox samples, which I used heavily when I first made some autocompleters.

这篇关于如何在Ext.js中自动完成html输入标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！