How would one do html input tag autocomplete in Ext.js?

Question

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

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.

Answer 1

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"
        }
    ]
}

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

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.