@@ -18,11 +18,14 @@ With [NPM](https://www.npmjs.com/package/choices.js):
1818``` zsh
1919npm install choices.js --save
2020```
21+
2122With [ Bower] ( https://bower.io/ ) :
2223``` zsh
2324bower install choices.js --save
2425```
26+
2527Or include Choices directly:
28+
2629``` html
2730<!-- Include base CSS (optional) -->
2831<link rel =" stylesheet" href =" assets/styles/css/base.min.css" >
@@ -106,13 +109,7 @@ Or include Choices directly:
106109 loadingState: ' is-loading' ,
107110 },
108111 callbackOnInit: null ,
109- callbackOnAddItem: null ,
110- callbackOnRemoveItem: null ,
111- callbackOnHighlightItem: null ,
112- callbackOnUnhighlightItem: null ,
113112 callbackOnCreateTemplates: null ,
114- callbackOnChange: null ,
115- callbackOnSearch: null ,
116113 });
117114```
118115
@@ -406,44 +403,6 @@ classNames: {
406403
407404**Usage:** Function to run once Choices initialises.
408405
409- ### callbackOnAddItem
410- **Type:** ` Function ` **Default:** ` null ` **Arguments:** ` id, value, groupValue`
411-
412- **Input types affected:** ` text` , ` select- one` , ` select- multiple`
413-
414- **Usage:** Function to run each time an item is added (programmatically or by the user).
415-
416- **Example:**
417-
418- ` ` ` js
419- const example = new Choices (element, {
420- callbackOnAddItem : (id , value , groupValue ) => {
421- // do something creative here...
422- },
423- };
424- ` ` `
425-
426- ### callbackOnRemoveItem
427- **Type:** ` Function ` **Default:** ` null ` **Arguments:** ` id, value, groupValue`
428-
429- **Input types affected:** ` text` , ` select- one` , ` select- multiple`
430-
431- **Usage:** Function to run each time an item is removed (programmatically or by the user).
432-
433- ### callbackOnHighlightItem
434- **Type:** ` Function ` **Default:** ` null ` **Arguments:** ` id, value, groupValue`
435-
436- **Input types affected:** ` text` , ` select- multiple`
437-
438- **Usage:** Function to run each time an item is highlighted.
439-
440- ### callbackOnUnhighlightItem
441- **Type:** ` Function ` **Default:** ` null ` **Arguments:** ` id, value, groupValue`
442-
443- **Input types affected:** ` text` , ` select- multiple`
444-
445- **Usage:** Function to run each time an item is unhighlighted.
446-
447406### callbackOnCreateTemplates
448407**Type:** ` Function ` **Default:** ` null ` **Arguments:** ` template`
449408
@@ -477,19 +436,73 @@ const example = new Choices(element, {
477436});
478437` ` `
479438
480- ### callbackOnChange
481- **Type:** ` Function ` **Default:** ` null ` **Arguments:** ` value`
439+ ## Events
440+ **Note:** Events fired by Choices behave the same as standard events. Each event is triggered on the element passed to Choices (accessible via ` this .passedElement ` . Arguments are accessible within the ` event .detail ` object.
441+
442+ **Example:**
443+
444+ ` ` ` js
445+ const element = document .getElementById (' example' );
446+ const example = new Choices (element);
447+
448+ element .addEventListener (' addItem' , function (event ) {
449+ // do something creative here...
450+ console .log (event .detail .id );
451+ console .log (event .detail .value );
452+ console .log (event .detail .groupValue );
453+ }, false );
454+
455+ // or
456+ const example = new Choices (document .getElementById (' example' ));
457+
458+ example .passedElement .addEventListener (' addItem' , function (event ) {
459+ // do something creative here...
460+ console .log (event .detail .id );
461+ console .log (event .detail .value );
462+ console .log (event .detail .groupValue );
463+ }, false );
464+
465+ ` ` `
466+
467+ ### addItem
468+ **Arguments:** ` id, value, groupValue`
482469
483470**Input types affected:** ` text` , ` select- one` , ` select- multiple`
484471
485- **Usage:** Function to run each time an item is added/removed by a user.
472+ **Usage:** Triggered each time an item is added (programmatically or by the user) .
486473
487- ### callbackOnSearch
488- **Type:** ` Function ` **Default:** ` null ` ** Arguments:** ` value`
474+ ### removeItem
475+ **Arguments:** ` id, value, groupValue `
489476
490- **Input types affected:** ` select- one` , ` select- multiple`
477+ **Input types affected:** ` text` , ` select- one` , ` select- multiple`
478+
479+ **Usage:** Triggered each time an item is removed (programmatically or by the user).
480+
481+ ### highlightItem
482+ **Arguments:** ` id, value, groupValue`
483+
484+ **Input types affected:** ` text` , ` select- multiple`
485+
486+ **Usage:** Triggered each time an item is highlighted.
487+
488+ ### unhighlightItem
489+ **Arguments:** ` id, value, groupValue`
490+
491+ **Input types affected:** ` text` , ` select- multiple`
492+
493+ **Usage:** Triggered each time an item is unhighlighted.
494+
495+ ### change
496+ **Arguments:** ` value`
497+
498+ **Input types affected:** ` text` , ` select- one` , ` select- multiple`
499+
500+ **Usage:** Triggered each time an item is added/removed **by a user**.
501+
502+ ### search
503+ **Arguments:** ` value` **Input types affected:** ` select- one` , ` select- multiple`
491504
492- **Usage:** Function to run when a user types into an input to search choices.
505+ **Usage:** Triggered when a user types into an input to search choices.
493506
494507## Methods
495508Methods can be called either directly or by chaining:
0 commit comments