diff --git a/README.md b/README.md index 0d939684b..bfeab90d6 100644 --- a/README.md +++ b/README.md @@ -14,11 +14,15 @@ 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 @@ -26,82 +30,84 @@ A vanilla, lightweight (~15kb gzipped 🎉), configurable select box/text input - + // 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 diff --git a/assets/scripts/src/choices.js b/assets/scripts/src/choices.js index 5ef2e6bbe..93e2b85d3 100644 --- a/assets/scripts/src/choices.js +++ b/assets/scripts/src/choices.js @@ -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: {