autocomplete_combo.js

Ext.onReady(function() {
 
    Ext.define('Ubuntu', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'release',
            convert: function(v, rec) {
                return Ext.String.format('{0} {1} - {2}', 
                                         rec.raw.adjective, 
                                         rec.raw.animal, 
                                         rec.raw.version);
            }
        }]
    });
 
    Ext.create('Ext.panel.Panel', {
        renderTo: Ext.getBody(),
        title: 'Ubuntu Releases',
        width: 300,
        bodyPadding: 10,
        layout: 'anchor',
        draggable: true,
        style: 'margin: 20px',        
        items: [{
            xtype: 'combo',
            store: Ext.create('Ext.data.Store', {
                model: 'Ubuntu',
                proxy: {
                    type: 'ajax',
                    url: '/backend/autocomplete',
                    reader: {
                        type: 'json',
                        root: 'data'
                    }
                }                    
            }),
            typeAhead: true,
            displayField: 'release',
            hideLabel: true,
            anchor: '100%',           
            minChars: 3,
            listConfig: {
                loadingText: 'Searching...',
                emptyText: 'No matching release found'
            }
        }, {
            xtype: 'component',
            style: 'margin-top:10px',
            html: 'Type at least 3 characters to trigger search'
        }]
    });
 
});