Skip to content

Commit ec0d336

Browse files
committed
Version 2.6.0
1 parent b2d9357 commit ec0d336

7 files changed

Lines changed: 328 additions & 284 deletions

File tree

README.md

Lines changed: 64 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,14 @@ With [NPM](https://www.npmjs.com/package/choices.js):
1818
```zsh
1919
npm install choices.js --save
2020
```
21+
2122
With [Bower](https://bower.io/):
2223
```zsh
2324
bower install choices.js --save
2425
```
26+
2527
Or 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
495508
Methods can be called either directly or by chaining:

0 commit comments

Comments
 (0)