mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-03 06:22:25 +02:00
Options array in config
This commit is contained in:
parent
54a8e282bb
commit
400a70e5cb
106
README.md
106
README.md
|
@ -26,6 +26,7 @@ A lightweight, configurable select box/text input plugin. Similar to Select2 and
|
||||||
// Passing options (with default options)
|
// Passing options (with default options)
|
||||||
const choices = new Choices(elements, {
|
const choices = new Choices(elements, {
|
||||||
items: [],
|
items: [],
|
||||||
|
options: [],
|
||||||
maxItemCount: -1,
|
maxItemCount: -1,
|
||||||
addItems: true,
|
addItems: true,
|
||||||
removeItems: true,
|
removeItems: true,
|
||||||
|
@ -87,8 +88,11 @@ A lightweight, configurable select box/text input plugin. Similar to Select2 and
|
||||||
|
|
||||||
## Configuration options
|
## Configuration options
|
||||||
### items
|
### items
|
||||||
<strong>Type:</strong> <strong>Default:</strong> `[]`
|
<strong>Type:</strong> `Array` <strong>Default:</strong> `[]`
|
||||||
<strong>Usage:</strong> Add pre-selected items to input.
|
|
||||||
|
<strong>Usage:</strong> Add pre-selected items to text input.
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`
|
||||||
|
|
||||||
Pass an array of strings:
|
Pass an array of strings:
|
||||||
|
|
||||||
|
@ -109,29 +113,63 @@ Pass an array of objects:
|
||||||
}]
|
}]
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### options
|
||||||
|
<strong>Type:</strong> `Array` <strong>Default:</strong> `[]`
|
||||||
|
|
||||||
|
<strong>Usage:</strong> Add options to select input.
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `select-one`, `select-multiple`
|
||||||
|
|
||||||
|
Pass an array of objects:
|
||||||
|
|
||||||
|
```
|
||||||
|
[{
|
||||||
|
value: 'Option 1',
|
||||||
|
label: 'Option 1',
|
||||||
|
selected: true,
|
||||||
|
disabled: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 'Option 2',
|
||||||
|
label: 'Option 2',
|
||||||
|
selected: false,
|
||||||
|
disabled: true,
|
||||||
|
}]
|
||||||
|
```
|
||||||
|
|
||||||
### maxItemCount
|
### maxItemCount
|
||||||
<strong>Type:</strong> `Number` <strong>Default:</strong>`-1`
|
<strong>Type:</strong> `Number` <strong>Default:</strong>`-1`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> The amount of items a user can input/select ("-1" indicates no limit).
|
<strong>Usage:</strong> The amount of items a user can input/select ("-1" indicates no limit).
|
||||||
|
|
||||||
### addItems
|
### addItems
|
||||||
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`
|
||||||
|
|
||||||
<strong>Usage:</strong> Whether a user can add items to the passed input's value.
|
<strong>Usage:</strong> Whether a user can add items to the passed input's value.
|
||||||
|
|
||||||
### removeItems
|
### removeItems
|
||||||
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Whether a user can remove items (only affects text and multiple select input types).
|
<strong>Usage:</strong> Whether a user can remove items (only affects text and multiple select input types).
|
||||||
|
|
||||||
### removeButton
|
### removeButton
|
||||||
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`false`
|
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`false`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Whether a button should show that, when clicked, will remove an item (only affects text and multiple select input types).
|
<strong>Usage:</strong> Whether a button should show that, when clicked, will remove an item (only affects text and multiple select input types).
|
||||||
|
|
||||||
### editItems
|
### editItems
|
||||||
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`false`
|
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`false`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`
|
||||||
|
|
||||||
<strong>Usage:</strong> Whether a user can edit selected items (only affects text input types).
|
<strong>Usage:</strong> Whether a user can edit selected items (only affects text input types).
|
||||||
|
|
||||||
<strong>Usage:</strong> Optionally set an item limit (`-1` indicates no limit).
|
<strong>Usage:</strong> Optionally set an item limit (`-1` indicates no limit).
|
||||||
|
@ -139,51 +177,71 @@ Pass an array of objects:
|
||||||
### delimiter
|
### delimiter
|
||||||
<strong>Type:</strong> `String` <strong>Default:</strong>`,`
|
<strong>Type:</strong> `String` <strong>Default:</strong>`,`
|
||||||
|
|
||||||
<strong>Usage:</strong> What divides each value (only affects text input types).
|
<strong>Input types affected:</strong> `text`
|
||||||
|
|
||||||
|
<strong>Usage:</strong> What divides each value.
|
||||||
|
|
||||||
### duplicates
|
### duplicates
|
||||||
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
||||||
|
|
||||||
<strong>Usage:</strong> Whether a user can input a duplicate item (only affects text input types).
|
<strong>Input types affected:</strong> `text`
|
||||||
|
|
||||||
|
<strong>Usage:</strong> Whether a user can input a duplicate item.
|
||||||
|
|
||||||
### paste
|
### paste
|
||||||
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-multiple`.
|
||||||
|
|
||||||
<strong>Usage:</strong> Whether a user can paste into the input.
|
<strong>Usage:</strong> Whether a user can paste into the input.
|
||||||
|
|
||||||
### search
|
### search
|
||||||
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `select-one`, `select-multiple`.
|
||||||
|
|
||||||
<strong>Usage:</strong> Whether a user can filter options by searching (only affects select input types).
|
<strong>Usage:</strong> Whether a user can filter options by searching (only affects select input types).
|
||||||
|
|
||||||
### regexFilter
|
### regexFilter
|
||||||
<strong>Type:</strong> `Regex` <strong>Default:</strong>`null`
|
<strong>Type:</strong> `Regex` <strong>Default:</strong>`null`
|
||||||
|
|
||||||
<strong>Usage:</strong> A filter that will need to pass for a user to successfully add an item (only affects text input types).
|
<strong>Input types affected:</strong> `text`
|
||||||
|
|
||||||
|
<strong>Usage:</strong> A filter that will need to pass for a user to successfully add an item.
|
||||||
|
|
||||||
### placeholder
|
### placeholder
|
||||||
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
<strong>Type:</strong> `Boolean` <strong>Default:</strong>`true`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Whether the input should show a placeholder. Used in conjunction with `placeholderValue`. If `placeholder` is set to true and no value is passed to `placeholderValue`, the passed input's placeholder attribute will be used as the placeholder value.
|
<strong>Usage:</strong> Whether the input should show a placeholder. Used in conjunction with `placeholderValue`. If `placeholder` is set to true and no value is passed to `placeholderValue`, the passed input's placeholder attribute will be used as the placeholder value.
|
||||||
|
|
||||||
### placeholderValue
|
### placeholderValue
|
||||||
<strong>Type:</strong> `String` <strong>Default:</strong>`null`
|
<strong>Type:</strong> `String` <strong>Default:</strong>`null`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> The value of the inputs placeholder.
|
<strong>Usage:</strong> The value of the inputs placeholder.
|
||||||
|
|
||||||
### prependValue
|
### prependValue
|
||||||
<strong>Type:</strong> `String` <strong>Default:</strong>`null`
|
<strong>Type:</strong> `String` <strong>Default:</strong>`null`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Prepend a value to each item added to input (only affects text input types).
|
<strong>Usage:</strong> Prepend a value to each item added to input (only affects text input types).
|
||||||
|
|
||||||
### appendValue
|
### appendValue
|
||||||
<strong>Type:</strong> `String` <strong>Default:</strong>`null`
|
<strong>Type:</strong> `String` <strong>Default:</strong>`null`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Append a value to each item added to input (only affects text input types).
|
<strong>Usage:</strong> Append a value to each item added to input (only affects text input types).
|
||||||
|
|
||||||
### loadingText
|
### loadingText
|
||||||
<strong>Type:</strong> `String` <strong>Default:</strong>`Loading...`
|
<strong>Type:</strong> `String` <strong>Default:</strong>`Loading...`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> The loading text that is shown when options are populated via an AJAX callback.
|
<strong>Usage:</strong> The loading text that is shown when options are populated via an AJAX callback.
|
||||||
|
|
||||||
### classNames
|
### classNames
|
||||||
|
@ -217,21 +275,29 @@ classNames: {
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Classes added to HTML generated by Choices. By default classnames follow the [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) notation.
|
<strong>Usage:</strong> Classes added to HTML generated by Choices. By default classnames follow the [BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) notation.
|
||||||
|
|
||||||
### callbackOnInit
|
### callbackOnInit
|
||||||
<strong>Type:</strong> `Function` <strong>Default:</strong>`() => {}`
|
<strong>Type:</strong> `Function` <strong>Default:</strong>`() => {}`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Function to run once Choices initialises.
|
<strong>Usage:</strong> Function to run once Choices initialises.
|
||||||
|
|
||||||
### callbackOnAddItem
|
### callbackOnAddItem
|
||||||
<strong>Type:</strong> `Function` <strong>Default:</strong>`(id, value, passedInput) => {}`
|
<strong>Type:</strong> `Function` <strong>Default:</strong>`(id, value, passedInput) => {}`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Function to run each time an item is added.
|
<strong>Usage:</strong> Function to run each time an item is added.
|
||||||
|
|
||||||
### callbackOnRemoveItem
|
### callbackOnRemoveItem
|
||||||
<strong>Type:</strong> `Function` <strong>Default:</strong>`(id, value, passedInput) => {}`
|
<strong>Type:</strong> `Function` <strong>Default:</strong>`(id, value, passedInput) => {}`
|
||||||
|
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Function to run each time an item is removed.
|
<strong>Usage:</strong> Function to run each time an item is removed.
|
||||||
|
|
||||||
|
|
||||||
|
@ -256,54 +322,80 @@ choices.disable();
|
||||||
```
|
```
|
||||||
|
|
||||||
### highlightAll();
|
### highlightAll();
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Highlight each chosen item (selected items can be removed).
|
<strong>Usage:</strong> Highlight each chosen item (selected items can be removed).
|
||||||
|
|
||||||
|
|
||||||
### unhighlightAll();
|
### unhighlightAll();
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Un-highlight each chosen item.
|
<strong>Usage:</strong> Un-highlight each chosen item.
|
||||||
|
|
||||||
|
|
||||||
### removeItemsByValue(value);
|
### removeItemsByValue(value);
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Remove each item by a given value.
|
<strong>Usage:</strong> Remove each item by a given value.
|
||||||
|
|
||||||
|
|
||||||
### removeActiveItems(excludedId);
|
### removeActiveItems(excludedId);
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Remove each selectable item.
|
<strong>Usage:</strong> Remove each selectable item.
|
||||||
|
|
||||||
|
|
||||||
### removeHighlightedItems();
|
### removeHighlightedItems();
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Remove each item the user has selected.
|
<strong>Usage:</strong> Remove each item the user has selected.
|
||||||
|
|
||||||
|
|
||||||
### showDropdown();
|
### showDropdown();
|
||||||
|
<strong>Input types affected:</strong> `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Show option list dropdown (only affects select inputs).
|
<strong>Usage:</strong> Show option list dropdown (only affects select inputs).
|
||||||
|
|
||||||
|
|
||||||
### hideDropdown();
|
### hideDropdown();
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Hide option list dropdown (only affects select inputs).
|
<strong>Usage:</strong> Hide option list dropdown (only affects select inputs).
|
||||||
|
|
||||||
|
|
||||||
### toggleDropdown();
|
### toggleDropdown();
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Toggle dropdown between showing/hidden.
|
<strong>Usage:</strong> Toggle dropdown between showing/hidden.
|
||||||
|
|
||||||
|
|
||||||
### setValue(args);
|
### setValue(args);
|
||||||
<strong>Usage:</strong> Set value of input based on an array of objects or strings. This behaves exactly the same as passing items via the `items` option but can be called after initialising Choices on an text input (only affects text inputs).
|
<strong>Input types affected:</strong> `text`
|
||||||
|
|
||||||
|
<strong>Usage:</strong> Set value of input based on an array of objects or strings. This behaves exactly the same as passing items via the `items` option but can be called after initialising Choices on an text input.
|
||||||
|
|
||||||
|
|
||||||
### clearValue();
|
### clearValue();
|
||||||
|
<strong>Input types affected:</strong> `text`
|
||||||
|
|
||||||
<strong>Usage:</strong> Clear value of input.
|
<strong>Usage:</strong> Clear value of input.
|
||||||
|
|
||||||
|
|
||||||
### clearInput();
|
### clearInput();
|
||||||
<strong>Usage:</strong> Clear input of any user inputted text (only affects text inputs).
|
<strong>Input types affected:</strong> `text`
|
||||||
|
|
||||||
|
<strong>Usage:</strong> Clear input of any user inputted text.
|
||||||
|
|
||||||
|
|
||||||
### disable();
|
### disable();
|
||||||
|
<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Disable input from selecting further options.
|
<strong>Usage:</strong> Disable input from selecting further options.
|
||||||
|
|
||||||
|
|
||||||
### ajax(fn);
|
### ajax(fn);
|
||||||
|
<strong>Input types affected:</strong> `select-one`, `select-multiple`
|
||||||
|
|
||||||
<strong>Usage:</strong> Populate options via a callback.
|
<strong>Usage:</strong> Populate options via a callback.
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -26,6 +26,7 @@ export class Choices {
|
||||||
|
|
||||||
const defaultConfig = {
|
const defaultConfig = {
|
||||||
items: [],
|
items: [],
|
||||||
|
options: [],
|
||||||
maxItemCount: -1,
|
maxItemCount: -1,
|
||||||
addItems: true,
|
addItems: true,
|
||||||
removeItems: true,
|
removeItems: true,
|
||||||
|
@ -90,8 +91,12 @@ export class Choices {
|
||||||
this.highlightPosition = 0;
|
this.highlightPosition = 0;
|
||||||
this.canSearch = this.config.search;
|
this.canSearch = this.config.search;
|
||||||
|
|
||||||
|
// Assing preset optiosn from passed object
|
||||||
|
this.presetOptions = this.config.options;
|
||||||
|
|
||||||
// Assign preset items from passed object first
|
// Assign preset items from passed object first
|
||||||
this.presetItems = this.config.items;
|
this.presetItems = this.config.items;
|
||||||
|
|
||||||
// Then add any values passed from attribute
|
// Then add any values passed from attribute
|
||||||
if(this.passedElement.value) {
|
if(this.passedElement.value) {
|
||||||
this.presetItems = this.presetItems.concat(this.passedElement.value.split(this.config.delimiter));
|
this.presetItems = this.presetItems.concat(this.passedElement.value.split(this.config.delimiter));
|
||||||
|
@ -1261,9 +1266,22 @@ export class Choices {
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
const passedOptions = Array.from(this.passedElement.options);
|
const passedOptions = Array.from(this.passedElement.options);
|
||||||
passedOptions.forEach((option) => {
|
let allOptions = [];
|
||||||
const isDisabled = option.disabled || option.parentNode.disabled;
|
|
||||||
this._addChoice(option.selected, isDisabled, option.value, option.innerHTML);
|
// Create array of options from option elements
|
||||||
|
passedOptions.forEach((o) => {
|
||||||
|
allOptions.push({
|
||||||
|
value: o.value,
|
||||||
|
label: o.innerHTML,
|
||||||
|
selected: o.selected,
|
||||||
|
disabled: o.disabled || o.parentNode.disabled
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
allOptions = allOptions.concat(this.presetOptions);
|
||||||
|
|
||||||
|
allOptions.forEach((o) => {
|
||||||
|
this._addChoice(o.selected ? o.selected : false, o.disabled ? o.disabled : false, o.value, o.label);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
} else if(this.passedElement.type === 'text') {
|
} else if(this.passedElement.type === 'text') {
|
||||||
|
|
163
index.html
163
index.html
|
@ -11,7 +11,7 @@
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="section">
|
<div class="section">
|
||||||
<h1>Choices</h1>
|
<!-- <h1>Choices</h1>
|
||||||
<p>A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.</p>
|
<p>A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.</p>
|
||||||
<h2>Text inputs</h2>
|
<h2>Text inputs</h2>
|
||||||
<label for="choices-1">Limited to 5</label>
|
<label for="choices-1">Limited to 5</label>
|
||||||
|
@ -135,93 +135,106 @@
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
<label for="choices-14">Countries remote source</label>
|
<label for="choices-14">Countries remote source</label>
|
||||||
<select name="choices-14" id="choices-14" placeholder="Pick a country"></select>
|
<select name="choices-14" id="choices-14" placeholder="Pick a country"></select> -->
|
||||||
|
|
||||||
|
<select name="choices-bug" id="choices-bug" placeholder="This is a placeholder">
|
||||||
|
<option value="0">Zero</option>
|
||||||
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
<script>
|
||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const choices1 = new Choices(document.getElementById('choices-1'), {
|
// const choices1 = new Choices(document.getElementById('choices-1'), {
|
||||||
delimiter: ',',
|
// delimiter: ',',
|
||||||
editItems: true,
|
// editItems: true,
|
||||||
maxItemCount: 5,
|
// maxItemCount: 5,
|
||||||
removeItemButton: true
|
// removeItemButton: true
|
||||||
});
|
// });
|
||||||
|
|
||||||
const choices2 = new Choices('#choices-2', {
|
// const choices2 = new Choices('#choices-2', {
|
||||||
paste: false,
|
// paste: false,
|
||||||
duplicateItems: false,
|
// duplicateItems: false,
|
||||||
editItems: true,
|
// editItems: true,
|
||||||
});
|
// });
|
||||||
|
|
||||||
const choices3 = new Choices('#choices-3', {
|
// const choices3 = new Choices('#choices-3', {
|
||||||
duplicates: false,
|
// duplicates: false,
|
||||||
editItems: true,
|
// 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,}))$/,
|
// 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,}))$/,
|
||||||
});
|
// });
|
||||||
|
|
||||||
const choices4 = new Choices('#choices-4', {
|
// const choices4 = new Choices('#choices-4', {
|
||||||
addItems: false,
|
// addItems: false,
|
||||||
removeItems: false,
|
// removeItems: false,
|
||||||
}).disable();
|
// }).disable();
|
||||||
|
|
||||||
const choices5 = new Choices('#choices-5', {
|
// const choices5 = new Choices('#choices-5', {
|
||||||
prependValue: 'item-',
|
// prependValue: 'item-',
|
||||||
appendValue: `-${Date.now()}`,
|
// appendValue: `-${Date.now()}`,
|
||||||
}).removeActiveItems();
|
// }).removeActiveItems();
|
||||||
|
|
||||||
const choices6 = new Choices('#choices-6', {
|
// const choices6 = new Choices('#choices-6', {
|
||||||
items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
|
// items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
|
||||||
});
|
// });
|
||||||
|
|
||||||
const choices7 = new Choices('#choices-7', { search: false }).setValue(['Set value 1', 'Set value 2']);
|
// const choices7 = new Choices('#choices-7', { search: false }).setValue(['Set value 1', 'Set value 2']);
|
||||||
|
|
||||||
const choices10 = new Choices('#choices-10', {
|
// const choices10 = new Choices('#choices-10', {
|
||||||
placeholder: true,
|
// placeholder: true,
|
||||||
placeholderValue: 'Pick an Strokes record',
|
// placeholderValue: 'Pick an Strokes record',
|
||||||
callbackOnRender: (state) => console.log(state)
|
// callbackOnRender: (state) => console.log(state)
|
||||||
}).ajax((callback) => {
|
// }).ajax((callback) => {
|
||||||
fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
// fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
||||||
.then((response) => {
|
// .then((response) => {
|
||||||
response.json().then(function(data) {
|
// response.json().then(function(data) {
|
||||||
callback(data.releases, 'title', 'title');
|
// callback(data.releases, 'title', 'title');
|
||||||
});
|
// });
|
||||||
})
|
// })
|
||||||
.catch((error) => {
|
// .catch((error) => {
|
||||||
console.log(error);
|
// console.log(error);
|
||||||
});
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
// const choices12 = new Choices('#choices-12', {
|
||||||
|
// placeholder: true,
|
||||||
|
// placeholderValue: 'Pick an Arctic Monkeys record'
|
||||||
|
// }).ajax((callback) => {
|
||||||
|
// fetch('https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
||||||
|
// .then((response) => {
|
||||||
|
// response.json().then((data) => {
|
||||||
|
// callback(data.releases, 'title', 'title');
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
// .catch((error) => {
|
||||||
|
// console.log(error);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
// const choices14 = new Choices('#choices-14').ajax((callback) => {
|
||||||
|
// fetch('https://restcountries.eu/rest/v1/all')
|
||||||
|
// .then((response) => {
|
||||||
|
// response.json().then((data) => {
|
||||||
|
// callback(data, 'alpha2Code', 'name');
|
||||||
|
// });
|
||||||
|
// })
|
||||||
|
// .catch((error) => {
|
||||||
|
// console.log(error);
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
|
||||||
|
// const choicesMultiple = new Choices('[data-choice]', {
|
||||||
|
// placeholderValue: 'This is a placeholder set in the config',
|
||||||
|
// removeButton: true
|
||||||
|
// });
|
||||||
|
|
||||||
|
const choicesBug = new Choices('#choices-bug', {
|
||||||
|
options: [
|
||||||
|
{value: 'One', label: 'Label One', selected: true, disabled: false},
|
||||||
|
{value: 'Two', label: 'Label Two'},
|
||||||
|
{value: 'Three', label: 'Label Three'},
|
||||||
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
const choices12 = new Choices('#choices-12', {
|
|
||||||
placeholder: true,
|
|
||||||
placeholderValue: 'Pick an Arctic Monkeys record'
|
|
||||||
}).ajax((callback) => {
|
|
||||||
fetch('https://api.discogs.com/artists/391170/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
|
||||||
.then((response) => {
|
|
||||||
response.json().then((data) => {
|
|
||||||
callback(data.releases, 'title', 'title');
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const choices14 = new Choices('#choices-14').ajax((callback) => {
|
|
||||||
fetch('https://restcountries.eu/rest/v1/all')
|
|
||||||
.then((response) => {
|
|
||||||
response.json().then((data) => {
|
|
||||||
callback(data, 'alpha2Code', 'name');
|
|
||||||
});
|
|
||||||
})
|
|
||||||
.catch((error) => {
|
|
||||||
console.log(error);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
const choicesMultiple = new Choices('[data-choice]', {
|
|
||||||
placeholderValue: 'This is a placeholder set in the config',
|
|
||||||
removeButton: true
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue