Option Group Columns

The opgroup_columns plugin uses CSS flexbox layouts to display optgroups in columns and adds keyboard shortcuts for navigating between columnns with and keys.

new TomSelect("#select-car",{
options: [
{id: 'avenger', make: 'dodge', model: 'Avenger'},
{id: 'caliber', make: 'dodge', model: 'Caliber'},
{id: 'caravan-grand-passenger', make: 'dodge', model: 'Caravan Grand Passenger'},
{id: 'challenger', make: 'dodge', model: 'Challenger'},
{id: 'ram-1500', make: 'dodge', model: 'Ram 1500'},
{id: 'viper', make: 'dodge', model: 'Viper'},
{id: 'a3', make: 'audi', model: 'A3'},
{id: 'a6', make: 'audi', model: 'A6'},
{id: 'r8', make: 'audi', model: 'R8'},
{id: 'rs-4', make: 'audi', model: 'RS 4'},
{id: 's4', make: 'audi', model: 'S4'},
{id: 's8', make: 'audi', model: 'S8'},
{id: 'tt', make: 'audi', model: 'TT'},
{id: 'avalanche', make: 'chevrolet', model: 'Avalanche'},
{id: 'aveo', make: 'chevrolet', model: 'Aveo'},
{id: 'cobalt', make: 'chevrolet', model: 'Cobalt'},
{id: 'silverado', make: 'chevrolet', model: 'Silverado'},
{id: 'suburban', make: 'chevrolet', model: 'Suburban'},
{id: 'tahoe', make: 'chevrolet', model: 'Tahoe'},
{id: 'trail-blazer', make: 'chevrolet', model: 'TrailBlazer'},
],
optgroups: [
{$order: 3, id: 'dodge', name: 'Dodge'},
{$order: 2, id: 'audi', name: 'Audi'},
{$order: 1, id: 'chevrolet', name: 'Chevrolet'}
],
labelField: 'model',
valueField: 'id',
optgroupField: 'make',
optgroupLabelField: 'name',
optgroupValueField: 'id',
lockOptgroupOrder: true,
searchField: ['model'],
plugins: ['optgroup_columns'],
openOnFocus: false
});
<input type="text" id="select-car" placeholder="Select cars...">

Plugin Configuration

No additional configuration settings for this plugin

Available Plugins