@@ -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
0 commit comments