Skip to content

Commit d6f34fc

Browse files
author
Josh Johnson
committed
Merge remote-tracking branch 'origin/master'
2 parents c620f2c + c99ed1c commit d6f34fc

2 files changed

Lines changed: 84 additions & 78 deletions

File tree

README.md

Lines changed: 83 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -14,94 +14,100 @@ A vanilla, lightweight (~15kb gzipped 🎉), configurable select box/text input
1414
* Custom templates
1515

1616
## Installation
17-
18-
`npm install choices.js --save`
19-
20-
## Setup
21-
17+
With [NPM](https://www.npmjs.com/package/choices.js):
18+
```bash
19+
npm install choices.js --save
20+
```
21+
With [Bower](https://bower.io/):
22+
```bash
23+
bower install choices.js --save
24+
```
25+
Or include Choices directly:
2226
```html
2327
<!-- Include base CSS (optional) -->
2428
<link rel="stylesheet" href="assets/styles/css/base.min.css">
2529
<!-- Include Choices CSS -->
2630
<link rel="stylesheet" href="assets/styles/css/choices.min.css">
2731
<!-- Include Choices JavaScript -->
2832
<script src="/assets/scripts/dist/choices.min.js"></script>
29-
<script>
30-
// Pass multiple elements:
31-
const choices = new Choices(elements);
33+
```
34+
## Setup
35+
36+
```js
37+
// Pass multiple elements:
38+
const choices = new Choices(elements);
3239

33-
// Pass single element:
34-
const choices = new Choices(element);
40+
// Pass single element:
41+
const choices = new Choices(element);
3542

36-
// Pass reference
37-
const choices = new Choices('[data-trigger']);
38-
const choices = new Choices('.js-choice');
43+
// Pass reference
44+
const choices = new Choices('[data-trigger']);
45+
const choices = new Choices('.js-choice');
3946

40-
// Pass jQuery element
41-
const choices = new Choices($('.js-choice')[0]);
47+
// Pass jQuery element
48+
const choices = new Choices($('.js-choice')[0]);
4249

43-
// Passing options (with default options)
44-
const choices = new Choices(elements, {
45-
items: [],
46-
choices: [],
47-
maxItemCount: -1,
48-
addItems: true,
49-
removeItems: true,
50-
removeItemButton: false,
51-
editItems: false,
52-
duplicateItems: true,
53-
delimiter: ',',
54-
paste: true,
55-
search: true,
56-
searchFloor: 1,
57-
flip: true,
58-
regexFilter: null,
59-
shouldSort: true,
60-
sortFilter: sortByAlpha,
61-
sortFields: ['label', 'value'],
62-
placeholder: true,
63-
placeholderValue: null,
64-
prependValue: null,
65-
appendValue: null,
66-
loadingText: 'Loading...',
67-
noResultsText: 'No results round',
68-
noChoicesText: 'No choices to choose from',
69-
itemSelectText: 'Press to select',
70-
classNames: {
71-
containerOuter: 'choices',
72-
containerInner: 'choices__inner',
73-
input: 'choices__input',
74-
inputCloned: 'choices__input--cloned',
75-
list: 'choices__list',
76-
listItems: 'choices__list--multiple',
77-
listSingle: 'choices__list--single',
78-
listDropdown: 'choices__list--dropdown',
79-
item: 'choices__item',
80-
itemSelectable: 'choices__item--selectable',
81-
itemDisabled: 'choices__item--disabled',
82-
itemChoice: 'choices__item--choice',
83-
group: 'choices__group',
84-
groupHeading : 'choices__heading',
85-
button: 'choices__button',
86-
activeState: 'is-active',
87-
focusState: 'is-focused',
88-
openState: 'is-open',
89-
disabledState: 'is-disabled',
90-
highlightedState: 'is-highlighted',
91-
hiddenState: 'is-hidden',
92-
flippedState: 'is-flipped',
93-
loadingState: 'is-loading',
94-
},
95-
callbackOnInit: null,
96-
callbackOnAddItem: null,
97-
callbackOnRemoveItem: null,
98-
callbackOnHighlightItem: null,
99-
callbackOnUnhighlightItem: null,
100-
callbackOnCreateTemplates: null,
101-
callbackOnChange: null,
102-
callbackOnSearch: null,
103-
});
104-
</script>
50+
// Passing options (with default options)
51+
const choices = new Choices(elements, {
52+
items: [],
53+
choices: [],
54+
maxItemCount: -1,
55+
addItems: true,
56+
removeItems: true,
57+
removeItemButton: false,
58+
editItems: false,
59+
duplicateItems: true,
60+
delimiter: ',',
61+
paste: true,
62+
search: true,
63+
searchFloor: 1,
64+
flip: true,
65+
regexFilter: null,
66+
shouldSort: true,
67+
sortFilter: sortByAlpha,
68+
sortFields: ['label', 'value'],
69+
placeholder: true,
70+
placeholderValue: null,
71+
prependValue: null,
72+
appendValue: null,
73+
loadingText: 'Loading...',
74+
noResultsText: 'No results found',
75+
noChoicesText: 'No choices to choose from',
76+
itemSelectText: 'Press to select',
77+
classNames: {
78+
containerOuter: 'choices',
79+
containerInner: 'choices__inner',
80+
input: 'choices__input',
81+
inputCloned: 'choices__input--cloned',
82+
list: 'choices__list',
83+
listItems: 'choices__list--multiple',
84+
listSingle: 'choices__list--single',
85+
listDropdown: 'choices__list--dropdown',
86+
item: 'choices__item',
87+
itemSelectable: 'choices__item--selectable',
88+
itemDisabled: 'choices__item--disabled',
89+
itemChoice: 'choices__item--choice',
90+
group: 'choices__group',
91+
groupHeading : 'choices__heading',
92+
button: 'choices__button',
93+
activeState: 'is-active',
94+
focusState: 'is-focused',
95+
openState: 'is-open',
96+
disabledState: 'is-disabled',
97+
highlightedState: 'is-highlighted',
98+
hiddenState: 'is-hidden',
99+
flippedState: 'is-flipped',
100+
loadingState: 'is-loading',
101+
},
102+
callbackOnInit: null,
103+
callbackOnAddItem: null,
104+
callbackOnRemoveItem: null,
105+
callbackOnHighlightItem: null,
106+
callbackOnUnhighlightItem: null,
107+
callbackOnCreateTemplates: null,
108+
callbackOnChange: null,
109+
callbackOnSearch: null,
110+
});
105111
```
106112

107113
## Terminology

assets/scripts/src/choices.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ class Choices {
6868
prependValue: null,
6969
appendValue: null,
7070
loadingText: 'Loading...',
71-
noResultsText: 'No results round',
71+
noResultsText: 'No results found',
7272
noChoicesText: 'No choices to choose from',
7373
itemSelectText: 'Press to select',
7474
classNames: {

0 commit comments

Comments
 (0)