Skip to content

Commit

Permalink
Merge remote-tracking branch 'origin/master'
Browse files Browse the repository at this point in the history
  • Loading branch information
Josh Johnson committed Oct 22, 2016
2 parents c620f2c + c99ed1c commit d6f34fc
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 78 deletions.
160 changes: 83 additions & 77 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,94 +14,100 @@ A vanilla, lightweight (~15kb gzipped 🎉), configurable select box/text input
* Custom templates

## Installation

`npm install choices.js --save`

## Setup

With [NPM](https://www.npmjs.com/package/choices.js):
```bash
npm install choices.js --save
```
With [Bower](https://bower.io/):
```bash
bower install choices.js --save
```
Or include Choices directly:
```html
<!-- Include base CSS (optional) -->
<link rel="stylesheet" href="assets/styles/css/base.min.css">
<!-- Include Choices CSS -->
<link rel="stylesheet" href="assets/styles/css/choices.min.css">
<!-- Include Choices JavaScript -->
<script src="/assets/scripts/dist/choices.min.js"></script>
<script>
// Pass multiple elements:
const choices = new Choices(elements);
```
## Setup

```js
// Pass multiple elements:
const choices = new Choices(elements);

// Pass single element:
const choices = new Choices(element);
// Pass single element:
const choices = new Choices(element);

// Pass reference
const choices = new Choices('[data-trigger']);
const choices = new Choices('.js-choice');
// Pass reference
const choices = new Choices('[data-trigger']);
const choices = new Choices('.js-choice');

// Pass jQuery element
const choices = new Choices($('.js-choice')[0]);
// Pass jQuery element
const choices = new Choices($('.js-choice')[0]);

// Passing options (with default options)
const choices = new Choices(elements, {
items: [],
choices: [],
maxItemCount: -1,
addItems: true,
removeItems: true,
removeItemButton: false,
editItems: false,
duplicateItems: true,
delimiter: ',',
paste: true,
search: true,
searchFloor: 1,
flip: true,
regexFilter: null,
shouldSort: true,
sortFilter: sortByAlpha,
sortFields: ['label', 'value'],
placeholder: true,
placeholderValue: null,
prependValue: null,
appendValue: null,
loadingText: 'Loading...',
noResultsText: 'No results round',
noChoicesText: 'No choices to choose from',
itemSelectText: 'Press to select',
classNames: {
containerOuter: 'choices',
containerInner: 'choices__inner',
input: 'choices__input',
inputCloned: 'choices__input--cloned',
list: 'choices__list',
listItems: 'choices__list--multiple',
listSingle: 'choices__list--single',
listDropdown: 'choices__list--dropdown',
item: 'choices__item',
itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled',
itemChoice: 'choices__item--choice',
group: 'choices__group',
groupHeading : 'choices__heading',
button: 'choices__button',
activeState: 'is-active',
focusState: 'is-focused',
openState: 'is-open',
disabledState: 'is-disabled',
highlightedState: 'is-highlighted',
hiddenState: 'is-hidden',
flippedState: 'is-flipped',
loadingState: 'is-loading',
},
callbackOnInit: null,
callbackOnAddItem: null,
callbackOnRemoveItem: null,
callbackOnHighlightItem: null,
callbackOnUnhighlightItem: null,
callbackOnCreateTemplates: null,
callbackOnChange: null,
callbackOnSearch: null,
});
</script>
// Passing options (with default options)
const choices = new Choices(elements, {
items: [],
choices: [],
maxItemCount: -1,
addItems: true,
removeItems: true,
removeItemButton: false,
editItems: false,
duplicateItems: true,
delimiter: ',',
paste: true,
search: true,
searchFloor: 1,
flip: true,
regexFilter: null,
shouldSort: true,
sortFilter: sortByAlpha,
sortFields: ['label', 'value'],
placeholder: true,
placeholderValue: null,
prependValue: null,
appendValue: null,
loadingText: 'Loading...',
noResultsText: 'No results found',
noChoicesText: 'No choices to choose from',
itemSelectText: 'Press to select',
classNames: {
containerOuter: 'choices',
containerInner: 'choices__inner',
input: 'choices__input',
inputCloned: 'choices__input--cloned',
list: 'choices__list',
listItems: 'choices__list--multiple',
listSingle: 'choices__list--single',
listDropdown: 'choices__list--dropdown',
item: 'choices__item',
itemSelectable: 'choices__item--selectable',
itemDisabled: 'choices__item--disabled',
itemChoice: 'choices__item--choice',
group: 'choices__group',
groupHeading : 'choices__heading',
button: 'choices__button',
activeState: 'is-active',
focusState: 'is-focused',
openState: 'is-open',
disabledState: 'is-disabled',
highlightedState: 'is-highlighted',
hiddenState: 'is-hidden',
flippedState: 'is-flipped',
loadingState: 'is-loading',
},
callbackOnInit: null,
callbackOnAddItem: null,
callbackOnRemoveItem: null,
callbackOnHighlightItem: null,
callbackOnUnhighlightItem: null,
callbackOnCreateTemplates: null,
callbackOnChange: null,
callbackOnSearch: null,
});
```

## Terminology
Expand Down
2 changes: 1 addition & 1 deletion assets/scripts/src/choices.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ class Choices {
prependValue: null,
appendValue: null,
loadingText: 'Loading...',
noResultsText: 'No results round',
noResultsText: 'No results found',
noChoicesText: 'No choices to choose from',
itemSelectText: 'Press to select',
classNames: {
Expand Down

0 comments on commit d6f34fc

Please sign in to comment.