如何在 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 选项设置为更新 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).

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

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.

我希望这能让你开始.Ext 文档一>.除了组合框示例之外，它还有一些相关的示例，我当我第一次制作一些自动完成程序时，大量使用.

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屋！