mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-20 22:46:33 +02:00
Options array in config
This commit is contained in:
Josh Johnson
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)
|
||||
const choices = new Choices(elements, {
|
||||
items: [],
|
||||
options: [],
|
||||
maxItemCount: -1,
|
||||
addItems: true,
|
||||
removeItems: true,
|
||||
|
|
@ -87,8 +88,11 @@ A lightweight, configurable select box/text input plugin. Similar to Select2 and
|
|||
|
||||
## Configuration options
|
||||
### items
|
||||
<strong>Type:</strong> <strong>Default:</strong> `[]`
|
||||
<strong>Usage:</strong> Add pre-selected items to input.
|
||||
<strong>Type:</strong> `Array` <strong>Default:</strong> `[]`
|
||||
|
||||
<strong>Usage:</strong> Add pre-selected items to text input.
|
||||
|
||||
<strong>Input types affected:</strong> `text`
|
||||
|
||||
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
|
||||
<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).
|
||||
|
||||
### addItems
|
||||
<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.
|
||||
|
||||
### removeItems
|
||||
<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).
|
||||
|
||||
### removeButton
|
||||
<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).
|
||||
|
||||
### editItems
|
||||
<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> Optionally set an item limit (`-1` indicates no limit).
|
||||
|
|
@ -139,51 +177,71 @@ Pass an array of objects:
|
|||
### delimiter
|
||||
<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
|
||||
<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
|
||||
<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.
|
||||
|
||||
### search
|
||||
<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).
|
||||
|
||||
### regexFilter
|
||||
<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
|
||||
<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.
|
||||
|
||||
### placeholderValue
|
||||
<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.
|
||||
|
||||
### prependValue
|
||||
<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).
|
||||
|
||||
### appendValue
|
||||
<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).
|
||||
|
||||
### loadingText
|
||||
<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.
|
||||
|
||||
### 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.
|
||||
|
||||
### callbackOnInit
|
||||
<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.
|
||||
|
||||
### callbackOnAddItem
|
||||
<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.
|
||||
|
||||
### callbackOnRemoveItem
|
||||
<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.
|
||||
|
||||
|
||||
|
|
@ -256,54 +322,80 @@ choices.disable();
|
|||
```
|
||||
|
||||
### highlightAll();
|
||||
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||
|
||||
<strong>Usage:</strong> Highlight each chosen item (selected items can be removed).
|
||||
|
||||
|
||||
### unhighlightAll();
|
||||
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||
|
||||
<strong>Usage:</strong> Un-highlight each chosen item.
|
||||
|
||||
|
||||
### removeItemsByValue(value);
|
||||
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||
|
||||
<strong>Usage:</strong> Remove each item by a given value.
|
||||
|
||||
|
||||
### removeActiveItems(excludedId);
|
||||
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||
|
||||
<strong>Usage:</strong> Remove each selectable item.
|
||||
|
||||
|
||||
### removeHighlightedItems();
|
||||
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||
|
||||
<strong>Usage:</strong> Remove each item the user has selected.
|
||||
|
||||
|
||||
### showDropdown();
|
||||
<strong>Input types affected:</strong> `select-one`, `select-multiple`
|
||||
|
||||
<strong>Usage:</strong> Show option list dropdown (only affects select inputs).
|
||||
|
||||
|
||||
### hideDropdown();
|
||||
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||
|
||||
<strong>Usage:</strong> Hide option list dropdown (only affects select inputs).
|
||||
|
||||
|
||||
### toggleDropdown();
|
||||
<strong>Input types affected:</strong> `text`, `select-multiple`
|
||||
|
||||
<strong>Usage:</strong> Toggle dropdown between showing/hidden.
|
||||
|
||||
|
||||
### 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();
|
||||
<strong>Input types affected:</strong> `text`
|
||||
|
||||
<strong>Usage:</strong> Clear value of input.
|
||||
|
||||
|
||||
### 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();
|
||||
<strong>Input types affected:</strong> `text`, `select-one`, `select-multiple`
|
||||
|
||||
<strong>Usage:</strong> Disable input from selecting further options.
|
||||
|
||||
|
||||
### ajax(fn);
|
||||
<strong>Input types affected:</strong> `select-one`, `select-multiple`
|
||||
|
||||
<strong>Usage:</strong> Populate options via a callback.
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -26,6 +26,7 @@ export class Choices {
|
|||
|
||||
const defaultConfig = {
|
||||
items: [],
|
||||
options: [],
|
||||
maxItemCount: -1,
|
||||
addItems: true,
|
||||
removeItems: true,
|
||||
|
|
@ -90,8 +91,12 @@ export class Choices {
|
|||
this.highlightPosition = 0;
|
||||
this.canSearch = this.config.search;
|
||||
|
||||
// Assing preset optiosn from passed object
|
||||
this.presetOptions = this.config.options;
|
||||
|
||||
// Assign preset items from passed object first
|
||||
this.presetItems = this.config.items;
|
||||
|
||||
// Then add any values passed from attribute
|
||||
if(this.passedElement.value) {
|
||||
this.presetItems = this.presetItems.concat(this.passedElement.value.split(this.config.delimiter));
|
||||
|
|
@ -1261,9 +1266,22 @@ export class Choices {
|
|||
});
|
||||
} else {
|
||||
const passedOptions = Array.from(this.passedElement.options);
|
||||
passedOptions.forEach((option) => {
|
||||
const isDisabled = option.disabled || option.parentNode.disabled;
|
||||
this._addChoice(option.selected, isDisabled, option.value, option.innerHTML);
|
||||
let allOptions = [];
|
||||
|
||||
// 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') {
|
||||
|
|
|
|||
163
index.html
163
index.html
|
|
@ -11,7 +11,7 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<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>
|
||||
<h2>Text inputs</h2>
|
||||
<label for="choices-1">Limited to 5</label>
|
||||
|
|
@ -135,93 +135,106 @@
|
|||
</select>
|
||||
|
||||
<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>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const choices1 = new Choices(document.getElementById('choices-1'), {
|
||||
delimiter: ',',
|
||||
editItems: true,
|
||||
maxItemCount: 5,
|
||||
removeItemButton: true
|
||||
});
|
||||
// const choices1 = new Choices(document.getElementById('choices-1'), {
|
||||
// delimiter: ',',
|
||||
// editItems: true,
|
||||
// maxItemCount: 5,
|
||||
// removeItemButton: true
|
||||
// });
|
||||
|
||||
const choices2 = new Choices('#choices-2', {
|
||||
paste: false,
|
||||
duplicateItems: false,
|
||||
editItems: true,
|
||||
});
|
||||
// const choices2 = new Choices('#choices-2', {
|
||||
// paste: false,
|
||||
// duplicateItems: false,
|
||||
// editItems: true,
|
||||
// });
|
||||
|
||||
const choices3 = new Choices('#choices-3', {
|
||||
duplicates: false,
|
||||
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,}))$/,
|
||||
});
|
||||
// const choices3 = new Choices('#choices-3', {
|
||||
// duplicates: false,
|
||||
// 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,}))$/,
|
||||
// });
|
||||
|
||||
const choices4 = new Choices('#choices-4', {
|
||||
addItems: false,
|
||||
removeItems: false,
|
||||
}).disable();
|
||||
// const choices4 = new Choices('#choices-4', {
|
||||
// addItems: false,
|
||||
// removeItems: false,
|
||||
// }).disable();
|
||||
|
||||
const choices5 = new Choices('#choices-5', {
|
||||
prependValue: 'item-',
|
||||
appendValue: `-${Date.now()}`,
|
||||
}).removeActiveItems();
|
||||
// const choices5 = new Choices('#choices-5', {
|
||||
// prependValue: 'item-',
|
||||
// appendValue: `-${Date.now()}`,
|
||||
// }).removeActiveItems();
|
||||
|
||||
const choices6 = new Choices('#choices-6', {
|
||||
items: ['josh@joshuajohnson.co.uk', { value: 'joe@bloggs.co.uk', label: 'Joe Bloggs' } ],
|
||||
});
|
||||
// const choices6 = new Choices('#choices-6', {
|
||||
// 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', {
|
||||
placeholder: true,
|
||||
placeholderValue: 'Pick an Strokes record',
|
||||
callbackOnRender: (state) => console.log(state)
|
||||
}).ajax((callback) => {
|
||||
fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
||||
.then((response) => {
|
||||
response.json().then(function(data) {
|
||||
callback(data.releases, 'title', 'title');
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
// const choices10 = new Choices('#choices-10', {
|
||||
// placeholder: true,
|
||||
// placeholderValue: 'Pick an Strokes record',
|
||||
// callbackOnRender: (state) => console.log(state)
|
||||
// }).ajax((callback) => {
|
||||
// fetch('https://api.discogs.com/artists/55980/releases?token=QBRmstCkwXEvCjTclCpumbtNwvVkEzGAdELXyRyW')
|
||||
// .then((response) => {
|
||||
// response.json().then(function(data) {
|
||||
// callback(data.releases, 'title', 'title');
|
||||
// });
|
||||
// })
|
||||
// .catch((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>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue