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

There is no separate autocomplete functionality that can be attached generically to inputs -- you would just use a ComboBox control with server-side filtering (you can use the "hideTrigger: true" config so that it still looks like a plain input). This is probably the closest example to what you'd want:

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

Answer 2

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.