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