Plugin API

Feature can be added to Tom Select without modifying via the microplugin interface. This helps protect against code bloat, allows for leaner builds and allows for addons to be sanely isolated The plugin system is lean, makes very few assumptions, and gives the developer complete control.

Plugin Examples

Plugin Usage

Without Options

new TomSelect('#select',{
	plugins: ['plugin_a', 'plugin_b']
});

With Options

new TomSelect('#select',{
	plugins: {
		'plugin_a': { /* ... */ },
		'plugin_b': { /* ... */ }
	}
});

For a more detailed description of plugin option formats and how the plugin system works, check out the microplugin documentation.

Including Plugins

Plugins can be included in your projects in four different ways:

tom-select.complete.js

Using tom-select.complete.js in your projects will give you immediate access to all plugins

tom-select.popular.js

Save some bandwidth with a bundle that's about 4kb smaller. tom-select.popular.js includes dropdown_input, remove_button, no_backspace_delete, and restore_on_backspace plugins.

tom-select.base.js

If you don't need any plugins, or want to load plugins individually, use tom-select.base.js. Add plugins to your project by including their js files: /js/plugins/remove_button.js, /js/plugins/dropdown_header.js, etc.

tom-select.custom.js

Use NPM to hand-pick plugins and create /build/js/tom-select.custom.js

# clone the repo
git clone https://github.com/orchidjs/tom-select.git
cd tom-select

# install dev dependencies
npm install

# create /build/js/tom-select.custom.js
npm run build -- --plugins=remove_button,restore_on_backspace

Creating Plugins

A few notes:

• All plugins live in their own folders in "src/plugins".
• Plugin names should follow the format: /[a-z_]+$
• JS source should live in a "plugin.js" file (required).
• CSS should live in a "plugin.scss" file (optional). It will be bundled at build time.
• Plugins are initialized right before the control is setup. This means that if you want to listen for events on any of the control's elements, you should override the setup() method (see "DOM Events").

Boilerplate

TomSelect.define('plugin_name', function(plugin_options) {
	// options: plugin-specific options
	// this: TomSelect instance
});

Adding Dependencies

TomSelect.define('plugin_name', function(plugin_options) {
	this.require('another_plugin');
});

Method Hooks

Execute plugin code 'before' or 'after' existing methods

TomSelect.define('plugin_name', function(plugin_options) {
	this.hook('after','setup',function(){
		// .. additional setup
	});
});

Overriding Methods

Use the 'instead' hook to override existing methods.

Note: If the method you're overriding returns a value, make sure the overridden function returns a value as well.

TomSelect.define('plugin_name', function(plugin_options) {
	var original_setup = this.setup;
	this.hook('instead','setup',function(){
		// .. custom setup
		return original_setup.apply(this, arguments);
	});
});

DOM Events

If you want to add event listeners to dom elements, add them after the setup() method.

TomSelect.define('plugin_name', function(plugin_options) {
	this.hook('after','setup',function(){
		this.control.addEventListener('click',function(evt){
			alert('the control was clicked');
		});
	});
});