mirror of
https://github.com/Choices-js/Choices.git
synced 2024-06-03 06:22:25 +02:00
Ability to assign preset items through constructor
This commit is contained in:
parent
64764559f5
commit
fb38d7bf55
2
assets/scripts/dist/bundle.js
vendored
2
assets/scripts/dist/bundle.js
vendored
File diff suppressed because one or more lines are too long
|
@ -12,6 +12,7 @@ export class Choices {
|
||||||
const defaultOptions = {
|
const defaultOptions = {
|
||||||
element: document.querySelector('[data-choice]'),
|
element: document.querySelector('[data-choice]'),
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
items: [],
|
||||||
addItems: true,
|
addItems: true,
|
||||||
removeItems: true,
|
removeItems: true,
|
||||||
editItems: false,
|
editItems: false,
|
||||||
|
@ -45,10 +46,19 @@ export class Choices {
|
||||||
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
|
// Retrieve triggering element (i.e. element with 'data-choice' trigger)
|
||||||
this.element = this.options.element;
|
this.element = this.options.element;
|
||||||
|
|
||||||
|
// Set preset items
|
||||||
|
this.presetItems = [];
|
||||||
|
if(this.options.items.length) {
|
||||||
|
this.presetItems = this.options.items;
|
||||||
|
} else if(this.element.value !== '') {
|
||||||
|
this.presetItems = this.element.value.split(this.options.delimiter);
|
||||||
|
}
|
||||||
|
|
||||||
// Bind methods
|
// Bind methods
|
||||||
this.onKeyDown = this.onKeyDown.bind(this);
|
this.onKeyDown = this.onKeyDown.bind(this);
|
||||||
this.onClick = this.onClick.bind(this);
|
this.onClick = this.onClick.bind(this);
|
||||||
this.render = this.render.bind(this);
|
this.render = this.render.bind(this);
|
||||||
|
this.init = this.init.bind(this);
|
||||||
|
|
||||||
// Let's have it large
|
// Let's have it large
|
||||||
this.init();
|
this.init();
|
||||||
|
@ -392,9 +402,8 @@ export class Choices {
|
||||||
this.input = input;
|
this.input = input;
|
||||||
this.list = list;
|
this.list = list;
|
||||||
|
|
||||||
// Add any preset values seperated by delimiter
|
// Add any preset values seperated by delimiter
|
||||||
let valueArray = this.element.value !== '' ? this.element.value.split(this.options.delimiter) : [];
|
this.presetItems.forEach((value) => {
|
||||||
valueArray.forEach((value) => {
|
|
||||||
this.addItem(value);
|
this.addItem(value);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -501,6 +510,7 @@ export class Choices {
|
||||||
let input3 = document.getElementById(3);
|
let input3 = document.getElementById(3);
|
||||||
let input4 = document.getElementById(4);
|
let input4 = document.getElementById(4);
|
||||||
let input5 = document.getElementById(5);
|
let input5 = document.getElementById(5);
|
||||||
|
let input6 = document.getElementById(6);
|
||||||
|
|
||||||
let choices1 = new Choices({
|
let choices1 = new Choices({
|
||||||
element : input1,
|
element : input1,
|
||||||
|
@ -538,4 +548,9 @@ export class Choices {
|
||||||
prependValue: 'item-',
|
prependValue: 'item-',
|
||||||
appendValue: `-${Date.now()}`
|
appendValue: `-${Date.now()}`
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let choices6 = new Choices({
|
||||||
|
element: input6,
|
||||||
|
items: ['josh@joshuajohnson.co.uk', 'joe@bloggs.co.uk']
|
||||||
|
});
|
||||||
})();
|
})();
|
|
@ -22,6 +22,9 @@
|
||||||
<label for="5">Text input that prepends and appends a value to each item</label>
|
<label for="5">Text input that prepends and appends a value to each item</label>
|
||||||
<input id="5" type="text" data-choice value="preset-1, preset-2" placeholder="This is a placeholder">
|
<input id="5" type="text" data-choice value="preset-1, preset-2" placeholder="This is a placeholder">
|
||||||
|
|
||||||
|
<label for="6">Text input with preset values passed through options</label>
|
||||||
|
<input id="6" type="text" data-choice placeholder="This is a placeholder">
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<script src="assets/scripts/dist/bundle.js"></script>
|
<script src="assets/scripts/dist/bundle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
Loading…
Reference in a new issue