Combo Boxes

The js is not minified so it is readable. See combos.js and combos.html .

Data Sources
The combo box can use any type of Roo.data.Store as it's data source. This means your data can be XML, JSON, arrays or any other supported format. It can be loaded using Ajax, script tags or be local. This combo uses local data from a JS array.

// simple array store
var store = new Roo.data.SimpleStore({
    fields: ['abbr', 'state'],
    data : exampleData
});
var combo = new Roo.form.ComboBox({
    store: store,
    displayField:'state',
    typeAhead: true,
    mode: 'local',
    triggerAction: 'all',
    emptyText:'Select a state...',
    selectOnFocus:true
});
combo.applyTo('local-states');

Unobtrusive
The combo box can very easily be used to convert existing select elements into auto-completing, filtering combos.

Originally looked like:
Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware Florida Georgia Hawaii Idaho Illinois Indiana Iowa Kansas Kentucky Louisiana Maine Maryland Massachusetts Michigan Minnesota Mississippi Missouri Montana Nebraska Nevada New Hampshire New Jersey New Mexico New York North Carolina North Dakota Ohio Oklahoma Oregon Pennsylvania Rhode Island South Carolina South Dakota Tennessee Texas Utah Vermont Virginia Washington West Virginia Wisconsin Wyoming

var converted = new Roo.form.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    transform:'state',
    width:135,
    forceSelection:true
});

Grid Editor
Click here to see the combo as a grid editor.

Templates and Ajax
Click here for a more advanced example.