如何将一个做HTML输入标签自动完成的Ext.js？ [英] 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?

更多precisely，基于迭代Ajax请求（如的jQuery自动完成插件其中的Ajax选项设置为一个更新URL）。

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

思想是AP preciated，感谢您的阅读。

Thoughts are appreciated and thank you for reading.

推荐答案

由于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.

我希望得到你开始。我想强调的外部文档。它得到了一些相关的例子，除了组合框样本的，这是我用重当我第一次做了一些autocompleters。

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.

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