mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-03 06:13:35 +02:00
RTL support + examples
This commit is contained in:
Josh Johnson
parent
188262f971
commit
4179ca038a
|
|
@ -10,6 +10,7 @@ A vanilla, lightweight (~15kb gzipped 🎉), configurable select box/text input
|
|||
* Flexible styling
|
||||
* Fast search/filtering
|
||||
* Clean API
|
||||
* Right-to-left support
|
||||
|
||||
## Setup
|
||||
|
||||
|
|
|
|||
32
assets/scripts/dist/choices.js
vendored
32
assets/scripts/dist/choices.js
vendored
|
|
@ -1,4 +1,4 @@
|
|||
/*! choices.js v1.1.9 | (c) 2016 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
|
||||
/*! choices.js v2.0.0 | (c) 2016 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
|
||||
/******/ (function(modules) { // webpackBootstrap
|
||||
/******/ // The module cache
|
||||
/******/ var installedModules = {};
|
||||
|
|
@ -179,6 +179,11 @@
|
|||
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
|
||||
this.passedElement = (0, _utils.isType)('String', element) ? document.querySelector(element) : element;
|
||||
|
||||
if (!this.passedElement) {
|
||||
console.error('Passed element not found');
|
||||
return;
|
||||
}
|
||||
|
||||
this.highlightPosition = 0;
|
||||
this.canSearch = this.config.search;
|
||||
|
||||
|
|
@ -731,6 +736,10 @@
|
|||
if (this.passedElement.type !== 'select-one') {
|
||||
this.input.style.width = (0, _utils.getWidthOfInput)(this.input);
|
||||
}
|
||||
if (this.passedElement.type !== 'text' && this.config.search) {
|
||||
this.isSearching = false;
|
||||
this.store.dispatch((0, _index3.activateChoices)(true));
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
|
|
@ -949,7 +958,6 @@
|
|||
// If we are clicking on an option
|
||||
var id = element.getAttribute('data-id');
|
||||
var choice = this.store.getChoiceById(id);
|
||||
var hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||
|
||||
if (choice && !choice.selected && !choice.disabled) {
|
||||
var canAddItem = this._canAddItem(activeItems, choice.value);
|
||||
|
|
@ -958,13 +966,6 @@
|
|||
this._addItem(choice.value, choice.label, choice.id);
|
||||
this._triggerChange(choice.value);
|
||||
this.clearInput(this.passedElement);
|
||||
this.isSearching = false;
|
||||
this.store.dispatch((0, _index3.activateChoices)(true));
|
||||
|
||||
// We only hide the dropdown on a choice selection for single select boxes
|
||||
if (this.passedElement.type === 'select-one' && hasActiveDropdown) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1012,7 +1013,7 @@
|
|||
key: '_canAddItem',
|
||||
value: function _canAddItem(activeItems, value) {
|
||||
var canAddItem = true;
|
||||
var notice = 'Press Enter to add "' + value + '"';
|
||||
var notice = 'Press Enter to add <b>"' + value + '"</b>';
|
||||
|
||||
if (this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') {
|
||||
if (this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) {
|
||||
|
|
@ -1240,6 +1241,8 @@
|
|||
// regardless of whether an item was added
|
||||
if (hasActiveDropdown && _this15.passedElement.type === 'select-one') {
|
||||
_this15.hideDropdown();
|
||||
_this15.clearInput();
|
||||
_this15.containerOuter.focus();
|
||||
}
|
||||
} else if (_this15.passedElement.type === 'select-one') {
|
||||
// Open single select dropdown if it's not active
|
||||
|
|
@ -1989,8 +1992,8 @@
|
|||
|
||||
var classNames = this.config.classNames;
|
||||
var templates = {
|
||||
containerOuter: function containerOuter() {
|
||||
return (0, _utils.strToEl)('\n <div class="' + classNames.containerOuter + '" data-type="' + _this21.passedElement.type + '" ' + (_this21.passedElement.type === 'select-one' ? 'tabindex="0"' : '') + ' aria-haspopup="true" aria-expanded="false"></div>\n ');
|
||||
containerOuter: function containerOuter(direction) {
|
||||
return (0, _utils.strToEl)('\n <div class="' + classNames.containerOuter + '" data-type="' + _this21.passedElement.type + '" ' + (_this21.passedElement.type === 'select-one' ? 'tabindex="0"' : '') + ' aria-haspopup="true" aria-expanded="false" dir="' + direction + '"></div>\n ');
|
||||
},
|
||||
containerInner: function containerInner() {
|
||||
return (0, _utils.strToEl)('\n <div class="' + classNames.containerInner + '"></div>\n ');
|
||||
|
|
@ -2044,12 +2047,14 @@
|
|||
value: function _createInput() {
|
||||
var _this22 = this;
|
||||
|
||||
var containerOuter = this._getTemplate('containerOuter');
|
||||
var direction = this.passedElement.getAttribute('dir') || 'ltr';
|
||||
var containerOuter = this._getTemplate('containerOuter', direction);
|
||||
var containerInner = this._getTemplate('containerInner');
|
||||
var itemList = this._getTemplate('itemList');
|
||||
var choiceList = this._getTemplate('choiceList');
|
||||
var input = this._getTemplate('input');
|
||||
var dropdown = this._getTemplate('dropdown');
|
||||
var placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false;
|
||||
|
||||
this.containerOuter = containerOuter;
|
||||
this.containerInner = containerInner;
|
||||
|
|
@ -2072,7 +2077,6 @@
|
|||
(0, _utils.wrap)(containerInner, containerOuter);
|
||||
|
||||
// If placeholder has been enabled and we have a value
|
||||
var placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false;
|
||||
if (placeholder) {
|
||||
input.placeholder = placeholder;
|
||||
if (this.passedElement.type !== 'select-one') {
|
||||
|
|
|
|||
2
assets/scripts/dist/choices.js.map
vendored
2
assets/scripts/dist/choices.js.map
vendored
File diff suppressed because one or more lines are too long
6
assets/scripts/dist/choices.min.js
vendored
6
assets/scripts/dist/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -115,6 +115,11 @@ export default class Choices {
|
|||
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
|
||||
this.passedElement = isType('String', element) ? document.querySelector(element) : element;
|
||||
|
||||
if (!this.passedElement) {
|
||||
console.error('Passed element not found');
|
||||
return;
|
||||
}
|
||||
|
||||
this.highlightPosition = 0;
|
||||
this.canSearch = this.config.search;
|
||||
|
||||
|
|
@ -582,6 +587,10 @@ export default class Choices {
|
|||
if (this.passedElement.type !== 'select-one') {
|
||||
this.input.style.width = getWidthOfInput(this.input);
|
||||
}
|
||||
if (this.passedElement.type !== 'text' && this.config.search) {
|
||||
this.isSearching = false;
|
||||
this.store.dispatch(activateChoices(true));
|
||||
}
|
||||
return this;
|
||||
}
|
||||
|
||||
|
|
@ -766,7 +775,6 @@ export default class Choices {
|
|||
// If we are clicking on an option
|
||||
const id = element.getAttribute('data-id');
|
||||
const choice = this.store.getChoiceById(id);
|
||||
const hasActiveDropdown = this.dropdown.classList.contains(this.config.classNames.activeState);
|
||||
|
||||
if (choice && !choice.selected && !choice.disabled) {
|
||||
const canAddItem = this._canAddItem(activeItems, choice.value);
|
||||
|
|
@ -775,13 +783,6 @@ export default class Choices {
|
|||
this._addItem(choice.value, choice.label, choice.id);
|
||||
this._triggerChange(choice.value);
|
||||
this.clearInput(this.passedElement);
|
||||
this.isSearching = false;
|
||||
this.store.dispatch(activateChoices(true));
|
||||
|
||||
// We only hide the dropdown on a choice selection for single select boxes
|
||||
if (this.passedElement.type === 'select-one' && hasActiveDropdown) {
|
||||
this.hideDropdown();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -819,7 +820,7 @@ export default class Choices {
|
|||
*/
|
||||
_canAddItem(activeItems, value) {
|
||||
let canAddItem = true;
|
||||
let notice = `Press Enter to add "${value}"`;
|
||||
let notice = `Press Enter to add <b>"${value}"</b>`;
|
||||
|
||||
if (this.passedElement.type === 'select-multiple' || this.passedElement.type === 'text') {
|
||||
if (this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) {
|
||||
|
|
@ -1026,6 +1027,8 @@ export default class Choices {
|
|||
// regardless of whether an item was added
|
||||
if (hasActiveDropdown && this.passedElement.type === 'select-one') {
|
||||
this.hideDropdown();
|
||||
this.clearInput();
|
||||
this.containerOuter.focus();
|
||||
}
|
||||
} else if (this.passedElement.type === 'select-one') {
|
||||
// Open single select dropdown if it's not active
|
||||
|
|
@ -1695,9 +1698,9 @@ export default class Choices {
|
|||
_createTemplates() {
|
||||
const classNames = this.config.classNames;
|
||||
const templates = {
|
||||
containerOuter: () => {
|
||||
containerOuter: (direction) => {
|
||||
return strToEl(`
|
||||
<div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false"></div>
|
||||
<div class="${classNames.containerOuter}" data-type="${this.passedElement.type}" ${this.passedElement.type === 'select-one' ? 'tabindex="0"' : ''} aria-haspopup="true" aria-expanded="false" dir="${direction}"></div>
|
||||
`);
|
||||
},
|
||||
containerInner: () => {
|
||||
|
|
@ -1781,12 +1784,14 @@ export default class Choices {
|
|||
* @private
|
||||
*/
|
||||
_createInput() {
|
||||
const containerOuter = this._getTemplate('containerOuter');
|
||||
const direction = this.passedElement.getAttribute('dir') || 'ltr';
|
||||
const containerOuter = this._getTemplate('containerOuter', direction);
|
||||
const containerInner = this._getTemplate('containerInner');
|
||||
const itemList = this._getTemplate('itemList');
|
||||
const choiceList = this._getTemplate('choiceList');
|
||||
const input = this._getTemplate('input');
|
||||
const dropdown = this._getTemplate('dropdown');
|
||||
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false;
|
||||
|
||||
this.containerOuter = containerOuter;
|
||||
this.containerInner = containerInner;
|
||||
|
|
@ -1809,7 +1814,6 @@ export default class Choices {
|
|||
wrap(containerInner, containerOuter);
|
||||
|
||||
// If placeholder has been enabled and we have a value
|
||||
const placeholder = this.config.placeholder ? this.config.placeholderValue || this.passedElement.getAttribute('placeholder') : false;
|
||||
if (placeholder) {
|
||||
input.placeholder = placeholder;
|
||||
if (this.passedElement.type !== 'select-one') {
|
||||
|
|
|
|||
|
|
@ -63,6 +63,14 @@
|
|||
.choices[data-type*="select-one"].is-open:after {
|
||||
border-color: transparent transparent #333333 transparent;
|
||||
margin-top: -7.5px; }
|
||||
.choices[data-type*="select-one"][dir="rtl"]:after {
|
||||
left: 11.5px;
|
||||
right: auto; }
|
||||
.choices[data-type*="select-one"][dir="rtl"] .choices__button {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-left: 25px;
|
||||
margin-right: 0; }
|
||||
|
||||
.choices[data-type*="select-multiple"] .choices__inner, .choices[data-type*="text"] .choices__inner {
|
||||
cursor: text; }
|
||||
|
|
@ -111,6 +119,9 @@
|
|||
display: inline-block;
|
||||
padding: 4px 16px 4px 4px;
|
||||
width: 100%; }
|
||||
[dir="rtl"] .choices__list--single {
|
||||
padding-right: 4px;
|
||||
padding-left: 16px; }
|
||||
.choices__list--single .choices__item {
|
||||
width: 100%; }
|
||||
|
||||
|
|
@ -131,6 +142,9 @@
|
|||
word-break: break-all; }
|
||||
.choices__list--multiple .choices__item[data-deletable] {
|
||||
padding-right: 5px; }
|
||||
[dir="rtl"] .choices__list--multiple .choices__item {
|
||||
margin-right: 0;
|
||||
margin-left: 3.75px; }
|
||||
.choices__list--multiple .choices__item.is-highlighted {
|
||||
background-color: #00a5bb;
|
||||
border: 1px solid #008fa1; }
|
||||
|
|
@ -170,6 +184,8 @@
|
|||
position: relative;
|
||||
padding: 10px;
|
||||
font-size: 14px; }
|
||||
[dir="rtl"] .choices__list--dropdown .choices__item {
|
||||
text-align: right; }
|
||||
@media (min-width: 640px) {
|
||||
.choices__list--dropdown .choices__item--selectable {
|
||||
padding-right: 100px; }
|
||||
|
|
@ -181,7 +197,14 @@
|
|||
right: 10px;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%); } }
|
||||
transform: translateY(-50%); }
|
||||
[dir="rtl"] .choices__list--dropdown .choices__item--selectable {
|
||||
text-align: right;
|
||||
padding-left: 100px;
|
||||
padding-right: 10px; }
|
||||
[dir="rtl"] .choices__list--dropdown .choices__item--selectable:after {
|
||||
right: auto;
|
||||
left: 10px; } }
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted {
|
||||
background-color: #f2f2f2; }
|
||||
.choices__list--dropdown .choices__item--selectable.is-highlighted:after {
|
||||
|
|
@ -233,6 +256,9 @@
|
|||
padding: 4px 0 4px 2px; }
|
||||
.choices__input:focus {
|
||||
outline: 0; }
|
||||
[dir="rtl"] .choices__input {
|
||||
padding-right: 2px;
|
||||
padding-left: 0; }
|
||||
|
||||
.choices__placeholder {
|
||||
opacity: .5; }
|
||||
|
|
|
|||
2
assets/styles/css/choices.min.css
vendored
2
assets/styles/css/choices.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -74,7 +74,7 @@ $choices-press-to-select-text: 'Press to select' !default;
|
|||
border-color: $choices-text-color transparent transparent transparent;
|
||||
border-width: 5px;
|
||||
position: absolute;
|
||||
right: 7.5px + 4px;
|
||||
right: 11.5px;
|
||||
top: 50%;
|
||||
margin-top: -2.5px;
|
||||
pointer-events: none;
|
||||
|
|
@ -83,6 +83,18 @@ $choices-press-to-select-text: 'Press to select' !default;
|
|||
border-color: transparent transparent $choices-text-color transparent;
|
||||
margin-top: -7.5px;
|
||||
}
|
||||
&[dir="rtl"] {
|
||||
&:after {
|
||||
left: 11.5px;
|
||||
right: auto;
|
||||
}
|
||||
.#{$choices-selector}__button {
|
||||
right: auto;
|
||||
left: 0;
|
||||
margin-left: 25px;
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.#{$choices-selector}[data-type*="select-multiple"], .#{$choices-selector}[data-type*="text"] {
|
||||
|
|
@ -131,6 +143,10 @@ $choices-press-to-select-text: 'Press to select' !default;
|
|||
display: inline-block;
|
||||
padding: 4px 16px 4px 4px;
|
||||
width: 100%;
|
||||
[dir="rtl"] & {
|
||||
padding-right: 4px;
|
||||
padding-left: 16px;
|
||||
}
|
||||
.#{$choices-selector}__item { width: 100%; }
|
||||
}
|
||||
|
||||
|
|
@ -150,6 +166,10 @@ $choices-press-to-select-text: 'Press to select' !default;
|
|||
color: #FFFFFF;
|
||||
word-break: break-all;
|
||||
&[data-deletable] { padding-right: 5px; }
|
||||
[dir="rtl"] & {
|
||||
margin-right: 0;
|
||||
margin-left: 3.75px;
|
||||
}
|
||||
&.is-highlighted {
|
||||
background-color: darken($choices-primary-color, 5%);
|
||||
border: 1px solid darken($choices-primary-color, 10%);
|
||||
|
|
@ -193,6 +213,7 @@ $choices-press-to-select-text: 'Press to select' !default;
|
|||
position: relative;
|
||||
padding: 10px;
|
||||
font-size: $choices-font-size-md;
|
||||
[dir="rtl"] & { text-align: right; }
|
||||
}
|
||||
.#{$choices-selector}__item--selectable {
|
||||
@media (min-width: 640px) {
|
||||
|
|
@ -206,6 +227,15 @@ $choices-press-to-select-text: 'Press to select' !default;
|
|||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
[dir="rtl"] & {
|
||||
text-align: right;
|
||||
padding-left: 100px;
|
||||
padding-right: 10px;
|
||||
&:after {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-highlighted {
|
||||
background-color: mix(#000000, #FFFFFF, 5%);
|
||||
|
|
@ -255,8 +285,12 @@ $choices-press-to-select-text: 'Press to select' !default;
|
|||
max-width: 100%;
|
||||
padding: 4px 0 4px 2px;
|
||||
&:focus { outline: 0; }
|
||||
[dir="rtl"] & {
|
||||
padding-right: 2px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.#{$choices-selector}__placeholder { opacity: .5; }
|
||||
|
||||
/*===== End of Choices ======*/
|
||||
/*===== End of Choices ======*/
|
||||
118
index.html
118
index.html
|
|
@ -19,7 +19,7 @@
|
|||
<!-- End ignore these -->
|
||||
|
||||
<!-- Optional includes -->
|
||||
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=es5,fetch,Element.prototype.classList,requestAnimationFrame,Node.insertBefore,Node.firstChild"></script>
|
||||
<!-- <script src="https://cdn.polyfill.io/v2/polyfill.js?features=es5,fetch,Element.prototype.classList,requestAnimationFrame,Node.insertBefore,Node.firstChild"></script> -->
|
||||
<!-- End optional includes -->
|
||||
|
||||
<!-- Choices includes -->
|
||||
|
|
@ -45,37 +45,40 @@
|
|||
<hr>
|
||||
|
||||
<h2>Text inputs</h2>
|
||||
<label for="choices-1">Limited to 5 values with remove button</label>
|
||||
<input class="form-control" id="choices-1" type="text" value="preset-1,preset-2" placeholder="Enter something">
|
||||
<label for="choices-text-remove-button">Limited to 5 values with remove button</label>
|
||||
<input class="form-control" id="choices-text-remove-button" type="text" value="preset-1,preset-2" placeholder="Enter something">
|
||||
|
||||
<label for="choices-2">Unique values only, no pasting</label>
|
||||
<input class="form-control" id="choices-2" type="text" value="preset-1, preset-2" placeholder="This is a placeholder" class="custom class">
|
||||
<label for="choices-text-unique-values">Unique values only, no pasting</label>
|
||||
<input class="form-control" id="choices-text-unique-values" type="text" value="preset-1, preset-2" placeholder="This is a placeholder" class="custom class">
|
||||
|
||||
<label for="choices-3">Email addresses only</label>
|
||||
<input class="form-control" id="choices-3" type="text" placeholder="This is a placeholder">
|
||||
<label for="choices-text-email-filter">Email addresses only</label>
|
||||
<input class="form-control" id="choices-text-email-filter" type="text" placeholder="This is a placeholder">
|
||||
|
||||
<label for="choices-4">Disabled</label>
|
||||
<input class="form-control" id="choices-4" type="text" value="josh@joshuajohnson.co.uk, joe@bloggs.co.uk" placeholder="This is a placeholder">
|
||||
<label for="choices-text-disabled">Disabled</label>
|
||||
<input class="form-control" id="choices-text-disabled" type="text" value="josh@joshuajohnson.co.uk, joe@bloggs.co.uk" placeholder="This is a placeholder">
|
||||
|
||||
<label for="choices-5">Prepends and appends a value to each items return value</label>
|
||||
<input class="form-control" id="choices-5" type="text" value="preset-1, preset-2" placeholder="This is a placeholder">
|
||||
<label for="choices-text-prepend-append-value">Prepends and appends a value to each items return value</label>
|
||||
<input class="form-control" id="choices-text-prepend-append-value" type="text" value="preset-1, preset-2" placeholder="This is a placeholder">
|
||||
|
||||
<label for="choices-6">Preset values passed through options</label>
|
||||
<input class="form-control" id="choices-6" type="text" value="olivia@benson.com" placeholder="This is a placeholder">
|
||||
<label for="choices-text-preset-values">Preset values passed through options</label>
|
||||
<input class="form-control" id="choices-text-preset-values" type="text" value="olivia@benson.com" placeholder="This is a placeholder">
|
||||
|
||||
<label for="choices-text-preset-values">Right-to-left</label>
|
||||
<input class="form-control" data-choice id="choices-text-rtl" type="text" value="Value 1, Value 2" dir="rtl">
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Multiple select input</h2>
|
||||
<label for="choices-7">Default</label>
|
||||
<select class="form-control" data-choice name="choices-7" id="choices-7" placeholder="This is a placeholder" multiple>
|
||||
<label for="choices-multiple-default">Default</label>
|
||||
<select class="form-control" data-choice name="choices-multiple-default" id="choices-multiple-default" placeholder="This is a placeholder" multiple>
|
||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-9">Option groups</label>
|
||||
<select class="form-control" data-choice name="choices-9" id="choices-9" placeholder="This is a placeholder" multiple>
|
||||
<label for="choices-multiple-groups">Option groups</label>
|
||||
<select class="form-control" data-choice name="choices-multiple-groups" id="choices-multiple-groups" placeholder="This is a placeholder" multiple>
|
||||
<optgroup label="UK">
|
||||
<option value="London">London</option>
|
||||
<option value="Manchester">Manchester</option>
|
||||
|
|
@ -108,27 +111,35 @@
|
|||
</optgroup>
|
||||
</select>
|
||||
|
||||
<label for="choices-10">Options from remote source (Fetch API) & limited to 5</label>
|
||||
<select class="form-control" name="choices-10" id="choices-10" multiple></select>
|
||||
<label for="choices-multiple-remote-fetch">Options from remote source (Fetch API) & limited to 5</label>
|
||||
<select class="form-control" name="choices-multiple-remote-fetch" id="choices-multiple-remote-fetch" multiple></select>
|
||||
|
||||
<label for="choices-multiple-rtl">Right-to-left</label>
|
||||
<select class="form-control" data-choice name="choices-multiple-rtl" id="choices-multiple-rtl" placeholder="This is a placeholder" multiple dir="rtl">
|
||||
<option value="Dropdown item 1" selected>Dropdown item 1</option>
|
||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
<option value="Dropdown item 4" disabled>Dropdown item 4</option>
|
||||
</select>
|
||||
|
||||
<hr>
|
||||
|
||||
<h2>Single select input</h2>
|
||||
<label for="choices-11">Default</label>
|
||||
<select class="form-control" data-choice name="choices-11" id="choices-11" placeholder="This is a placeholder">
|
||||
<label for="choices-single-default">Default</label>
|
||||
<select class="form-control" data-choice name="choices-single-default" id="choices-single-default" placeholder="This is a placeholder">
|
||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-12">Options from remote source (Fetch API)</label>
|
||||
<select class="form-control" name="choices-12" id="choices-12" placeholder="Pick an Arctic Monkeys record"></select>
|
||||
<label for="choices-single-remote-fetch">Options from remote source (Fetch API)</label>
|
||||
<select class="form-control" name="choices-single-remote-fetch" id="choices-single-remote-fetch" placeholder="Pick an Arctic Monkeys record"></select>
|
||||
|
||||
<label for="choices-14">Options from remote source (XHR) & remove button</label>
|
||||
<select class="form-control" name="choices-14" id="choices-14" placeholder="Pick a Smiths record"></select>
|
||||
<label for="choices-single-remove-xhr">Options from remote source (XHR) & remove button</label>
|
||||
<select class="form-control" name="choices-single-remove-xhr" id="choices-single-remove-xhr" placeholder="Pick a Smiths record"></select>
|
||||
|
||||
<label for="choices-13">Option groups</label>
|
||||
<select class="form-control" data-choice name="choices-13" id="choices-13" placeholder="This is a placeholder">
|
||||
<label for="choices-single-groups">Option groups</label>
|
||||
<select class="form-control" data-choice name="choices-single-groups" id="choices-single-groups" placeholder="This is a placeholder">
|
||||
<optgroup label="UK">
|
||||
<option value="London">London</option>
|
||||
<option value="Manchester">Manchester</option>
|
||||
|
|
@ -161,19 +172,26 @@
|
|||
</optgroup>
|
||||
</select>
|
||||
|
||||
<label for="choices-15">Options added via config with no search</label>
|
||||
<select class="form-control" name="choices-15" id="choices-15">
|
||||
<label for="choices-single-rtl">Right-to-left</label>
|
||||
<select class="form-control" data-choice name="choices-single-rtl" id="choices-single-rtl" placeholder="This is a placeholder" dir="rtl">
|
||||
<option value="Dropdown item 1">Dropdown item 1</option>
|
||||
<option value="Dropdown item 2">Dropdown item 2</option>
|
||||
<option value="Dropdown item 3">Dropdown item 3</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-single-no-search">Options added via config with no search</label>
|
||||
<select class="form-control" name="choices-single-no-search" id="choices-single-no-search">
|
||||
<option value="0">Zero</option>
|
||||
</select>
|
||||
|
||||
<label for="choices-16">Option and option groups added via config</label>
|
||||
<select class="form-control" name="choices-16" id="choices-16" placeholder="This is a placeholder"></select>
|
||||
<label for="choices-single-preset-options">Option and option groups added via config</label>
|
||||
<select class="form-control" name="choices-single-preset-options" id="choices-single-preset-options" placeholder="This is a placeholder"></select>
|
||||
|
||||
<label for="choices-17">Option selected via config</label>
|
||||
<select class="form-control" name="choices-17" id="choices-17" placeholder="This is a placeholder"></select>
|
||||
<label for="choices-single-selected-option">Option selected via config</label>
|
||||
<select class="form-control" name="choices-single-selected-option" id="choices-single-selected-option" placeholder="This is a placeholder"></select>
|
||||
|
||||
<label for="choices-18">Options without sorting</label>
|
||||
<select class="form-control" name="choices-18" id="choices-18" placeholder="This is a placeholder">
|
||||
<label for="choices-single-no-sorting">Options without sorting</label>
|
||||
<select class="form-control" name="choices-single-no-sorting" id="choices-single-no-sorting" placeholder="This is a placeholder">
|
||||
<option value="Madrid">Madrid</option>
|
||||
<option value="Toronto">Toronto</option>
|
||||
<option value="Vancouver">Vancouver</option>
|
||||
|
|
@ -216,7 +234,7 @@
|
|||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
var example1 = new Choices(document.getElementById('choices-1'), {
|
||||
var example1 = new Choices(document.getElementById('choices-text-remove-button'), {
|
||||
delimiter: ',',
|
||||
editItems: true,
|
||||
maxItemCount: 5,
|
||||
|
|
@ -229,32 +247,32 @@
|
|||
},
|
||||
});
|
||||
|
||||
var example2 = new Choices('#choices-2', {
|
||||
var example2 = new Choices('#choices-text-unique-values', {
|
||||
paste: false,
|
||||
duplicateItems: false,
|
||||
editItems: true,
|
||||
});
|
||||
|
||||
var example3 = new Choices('#choices-3', {
|
||||
var example3 = new Choices('#choices-text-email-filter', {
|
||||
editItems: true,
|
||||
regexFilter: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
||||
});
|
||||
|
||||
var example4 = new Choices('#choices-4', {
|
||||
var example4 = new Choices('#choices-text-disabled', {
|
||||
addItems: false,
|
||||
removeItems: false,
|
||||
}).disable();
|
||||
|
||||
var example5 = new Choices('#choices-5', {
|
||||
var example5 = new Choices('#choices-text-prepend-append-value', {
|
||||
prependValue: 'item-',
|
||||
appendValue: '-' + Date.now(),
|
||||
}).removeActiveItems();
|
||||
|
||||
var example7 = new Choices('#choices-6', {
|
||||
var example7 = new Choices('#choices-text-preset-values', {
|
||||
items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
|
||||
});
|
||||
|
||||
var example9 = new Choices('#choices-10', {
|
||||
var example9 = new Choices('#choices-multiple-remote-fetch', {
|
||||
placeholder: true,
|
||||
placeholderValue: 'Pick an Strokes record',
|
||||
maxItemCount: 5,
|
||||
|
|
@ -271,7 +289,7 @@
|
|||
});
|
||||
});
|
||||
|
||||
var example10 = new Choices('#choices-12', {
|
||||
var example10 = new Choices('#choices-single-remote-fetch', {
|
||||
placeholder: true,
|
||||
placeholderValue: 'Pick an Arctic Monkeys record'
|
||||
}).ajax(function(callback) {
|
||||
|
|
@ -287,7 +305,7 @@
|
|||
});
|
||||
});
|
||||
|
||||
var example11 = new Choices('#choices-14', {
|
||||
var example11 = new Choices('#choices-single-remove-xhr', {
|
||||
removeItemButton: true,
|
||||
}).ajax(function(callback) {
|
||||
var request = new XMLHttpRequest();
|
||||
|
|
@ -295,9 +313,9 @@
|
|||
request.onreadystatechange = function() {
|
||||
var status;
|
||||
var data;
|
||||
if (request.readyState == 4) {
|
||||
if (request.readyState === 4) {
|
||||
status = request.status;
|
||||
if (status == 200) {
|
||||
if (status === 200) {
|
||||
data = JSON.parse(request.responseText);
|
||||
callback(data.releases, 'title', 'title');
|
||||
example11.setValueByChoice('How Soon Is Now?');
|
||||
|
|
@ -314,7 +332,7 @@
|
|||
removeButton: true,
|
||||
});
|
||||
|
||||
var example13 = new Choices('#choices-15', {
|
||||
var example13 = new Choices('#choices-single-no-search', {
|
||||
search: false,
|
||||
removeItemButton: true,
|
||||
choices: [
|
||||
|
|
@ -328,7 +346,7 @@
|
|||
{value: 'Six', label: 'Label Six', selected: true},
|
||||
], 'value', 'label');
|
||||
|
||||
var example14 = new Choices('#choices-16', {
|
||||
var example14 = new Choices('#choices-single-preset-options', {
|
||||
placeholder: true,
|
||||
}).setChoices([{
|
||||
label: 'Group one',
|
||||
|
|
@ -351,7 +369,7 @@
|
|||
]
|
||||
}], 'value', 'label');
|
||||
|
||||
var example15 = new Choices('#choices-17', {
|
||||
var example15 = new Choices('#choices-single-selected-option', {
|
||||
choices: [
|
||||
{value: 'One', label: 'Label One', selected: true},
|
||||
{value: 'Two', label: 'Label Two', disabled: true},
|
||||
|
|
@ -359,7 +377,7 @@
|
|||
],
|
||||
}).setValueByChoice('Two');
|
||||
|
||||
var example16 = new Choices('#choices-18', {
|
||||
var example16 = new Choices('#choices-single-no-sorting', {
|
||||
shouldSort: false,
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue