Events
Tokenize2 is based on events you can catch.
Overview
Tokenize2 is event based, all major calls are triggered through events.
Usage
In the example below, we catch tokenize:dropdown:itemAdd event to print in the console the value of the item inserted in the dropdown.
$('.tokenize-demo').on('tokenize:dropdown:itemAdd', function(e, value){
console.log(value);
});The first agrument e is never used but has to be writed in the code.
If you want to add a token in Tokenize2, you have to use the event system as the example below.
$('.tokenize-demo').tokenize2().trigger('tokenize:tokens:add', ['token value', 'token display text', true]);Note that the third argument must be set to true if tokensAllowCustom is set to false.
Events
Below the list of all events used by Tokenize2.
| Events | Arguments | Description |
|---|---|---|
| tokenize:load | none | Fired on Tokenize2 initialization |
| tokenize:clear | none | Fired when clear tokens |
| tokenize:remap | none | Fired when Tokenize2 match the select with tokens |
| tokenize:focus | none | Fired when focus |
| tokenize:deselect | none | Fired when blur |
| tokenize:search | [string] | Fired when search |
| tokenize:paste | none | Fired when paste a text in search input |
| tokenize:clear | none | Fired when clear tokens |
| tokenize:dropdown:up | none | Fired when type up in dropdown |
| tokenize:dropdown:down | none | Fired when type down in dropdown |
| tokenize:dropdown:clear | none | Fired when dropdown items are cleared |
| tokenize:dropdown:show | none | Fired when dropdown show |
| tokenize:dropdown:hide | none | Fired when dropdown hide |
| tokenize:dropdown:fill | [array of object] | Fired when dropdown items are added |
| tokenize:dropdown:itemAdd | [object] | Fired when dropdown item is added |
| tokenize:keypress | [event] | Fired when keypress |
| tokenize:keydown | [event] | Fired when keydown |
| tokenize:keyup | [event] | Fired when keyup |
| tokenize:tokens:reorder | none | Fired when tokens are reordered |
| tokenize:tokens:add | [string, string, boolean] | Fired before token is added |
| tokenize:tokens:added | [string, string] | Fired when token is added |
| tokenize:tokens:remove | [string] | Fired when token is removed |
tokenize:search
/**
* @param {event} e Not used
* @param {string} value The search value
*/
Event('tokenize:search', function(e, value){});tokenize:dropdown:fill
/**
* @param {event} e Not used
* @param {array} items List of {value: string, text: string}
*/
Event('tokenize:dropdown:fill', function(e, items){});tokenize:dropdown:itemAdd
/**
* @param {event} e Not used
* @param {object} item {value: string, text: string}
*/
Event('tokenize:dropdown:itemAdd', function(e, item){});tokenize:keypress
/**
* @param {event} e Not used
* @param {event} routedEvent Base event
*/
Event('tokenize:keypress', function(e, routedEvent){});tokenize:keydown
/**
* @param {event} e Not used
* @param {event} routedEvent Base event
*/
Event('tokenize:keydown', function(e, routedEvent){});tokenize:keyup
/**
* @param {event} e Not used
* @param {event} routedEvent Base event
*/
Event('tokenize:keyup', function(e, routedEvent){});tokenize:tokens:add
/**
* @param {event} e Not used
* @param {string} value The token value
* @param {string} text The token display text
* @param {boolean} force Must be true if tokensAllowCustom is false
*/
Event('tokenize:tokens:add', function(e, value, text, force){});tokenize:tokens:add
/**
* @param {event} e Not used
* @param {string} value The token value
* @param {string} text The token display text
*/
Event('tokenize:tokens:added', function(e, value, text){});tokenize:tokens:remove
/**
* @param {event} e Not used
* @param {string} value The token value
*/
Event('tokenize:tokens:remove', function(e, value){});