Events API
In the usage documentation, a few callbacks are listed that allow you to listen for certain events. Callbacks aren't always ideal though; specifically when you wish to have multiple handlers.
Tom Select instances have a basic event emitter interface that mimics jQuery, Backbone.js, et al:
var handler = function() { /* ... */ };
var select = new TomSelect('#input-id');
select.on('event_name', handler);
select.off('event_name');
select.off('event_name', handler);
List of Events
Event | Params | Description |
---|---|---|
"initialize" |
Invoked once the control is completely initialized. | |
"change" |
value |
Invoked when the value of the control changes. |
"focus" |
Invoked when the control gains focus. | |
"blur" |
Invoked when the control loses focus. | |
"item_add" |
value , item |
Invoked when an item is added (i.e., when an option is selected) |
"item_remove" |
value , $item |
Invoked when an item is deselected. |
"item_select" |
item |
Invoked when an item is selected. |
"clear" |
Invoked when the control is manually cleared via the clear() method. | |
"option_add" |
value , data |
Invoked when a new option is added to the available options list. |
"option_remove" |
value |
Invoked when an option is removed from the available options. |
"option_clear" |
Invoked when all options are removed from the control. | |
"optgroup_add" |
id , data |
Invoked when a new option is added to the available options list. |
"optgroup_remove" |
id |
Invoked when an option group is removed. |
"optgroup_clear" |
Invoked when all option groups are removed. | |
"dropdown_open" |
dropdown |
Invoked when the dropdown opens. |
"dropdown_close" |
dropdown |
Invoked when the dropdown closes. |
"type" |
str |
Invoked when the user types while filtering options. |
"load" |
data |
Invoked when new options have been loaded and added to the control (via the load option or load API method). |
"destroy" |
Invoked right before the control is destroyed. |