mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-18 13:36:35 +02:00
Append/prepend value options + ability to filter by regex
This commit is contained in:
parent
42e2439c1e
commit
526fe9fd85
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
|
@ -18,14 +18,17 @@ export class Choices {
|
||||||
const DEFAULT_OPTIONS = {
|
const DEFAULT_OPTIONS = {
|
||||||
element: document.querySelector('[data-choice]'),
|
element: document.querySelector('[data-choice]'),
|
||||||
disabled: false,
|
disabled: false,
|
||||||
create: true,
|
addItems: true,
|
||||||
removeItems: true,
|
removeItems: true,
|
||||||
editItems: false,
|
editItems: false,
|
||||||
maxItems: false,
|
maxItems: false,
|
||||||
delimiter: ',',
|
delimiter: ',',
|
||||||
allowDuplicates: true,
|
allowDuplicates: true,
|
||||||
|
regexFilter: false,
|
||||||
debug: false,
|
debug: false,
|
||||||
placeholder: false,
|
placeholder: false,
|
||||||
|
prependValue: false,
|
||||||
|
appendValue: false,
|
||||||
callbackOnInit: function() {},
|
callbackOnInit: function() {},
|
||||||
callbackOnRender: function() {},
|
callbackOnRender: function() {},
|
||||||
callbackOnRemoveItem: function() {},
|
callbackOnRemoveItem: function() {},
|
||||||
|
@ -126,7 +129,7 @@ export class Choices {
|
||||||
// If CTRL + A or CMD + A have been pressed and there are items to select
|
// If CTRL + A or CMD + A have been pressed and there are items to select
|
||||||
if (CTRLDOWN_KEY && e.keyCode === A_KEY && this.list && this.list.children) {
|
if (CTRLDOWN_KEY && e.keyCode === A_KEY && this.list && this.list.children) {
|
||||||
let handleSelectAll = () => {
|
let handleSelectAll = () => {
|
||||||
if(this.options.removeItems) {
|
if(this.options.removeItems && !this.input.value) {
|
||||||
this.selectAll(this.list.children);
|
this.selectAll(this.list.children);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -158,10 +161,22 @@ export class Choices {
|
||||||
// All is good, update
|
// All is good, update
|
||||||
if (canUpdate) {
|
if (canUpdate) {
|
||||||
if(this.element.type === 'text') {
|
if(this.element.type === 'text') {
|
||||||
this.addItem(this.list, value);
|
let canAddItem = true;
|
||||||
this.updateInputValue(value);
|
|
||||||
this.clearInput(this.element);
|
// If a user has supplied a regular expression filter
|
||||||
this.unselectAll(this.list.children);
|
if(this.options.regexFilter) {
|
||||||
|
// Determine whether we can update based on whether
|
||||||
|
// our regular expression passes
|
||||||
|
canAddItem = this.regexFilter(value);
|
||||||
|
}
|
||||||
|
|
||||||
|
// All is good, add
|
||||||
|
if(canAddItem) {
|
||||||
|
this.addItem(this.list, value);
|
||||||
|
this.updateInputValue(value);
|
||||||
|
this.clearInput(this.element);
|
||||||
|
this.unselectAll(this.list.children);
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -242,6 +257,13 @@ export class Choices {
|
||||||
|
|
||||||
getValues() {}
|
getValues() {}
|
||||||
|
|
||||||
|
regexFilter(value) {
|
||||||
|
let expression = new RegExp(this.options.regexFilter, 'i');
|
||||||
|
let passesTest = expression.test(value);
|
||||||
|
|
||||||
|
return passesTest;
|
||||||
|
}
|
||||||
|
|
||||||
getPlaceholder() {}
|
getPlaceholder() {}
|
||||||
|
|
||||||
selectAll(items) {
|
selectAll(items) {
|
||||||
|
@ -287,20 +309,32 @@ export class Choices {
|
||||||
addItem(parent, value) {
|
addItem(parent, value) {
|
||||||
if (this.options.debug) console.debug('Add item');
|
if (this.options.debug) console.debug('Add item');
|
||||||
|
|
||||||
// // Create new list element
|
let passedValue = value;
|
||||||
|
|
||||||
|
// If a prepended value has been passed, prepend it
|
||||||
|
if(this.options.prependValue) {
|
||||||
|
passedValue = this.options.prependValue + passedValue.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// If an appended value has been passed, append it
|
||||||
|
if(this.options.appendValue) {
|
||||||
|
passedValue = passedValue + this.options.appendValue.toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Create new list element
|
||||||
let item = document.createElement('li');
|
let item = document.createElement('li');
|
||||||
item.classList.add('choices__item');
|
item.classList.add('choices__item');
|
||||||
item.textContent = value;
|
item.textContent = passedValue;
|
||||||
|
|
||||||
// Append it to list
|
// Append it to list
|
||||||
parent.appendChild(item);
|
parent.appendChild(item);
|
||||||
|
|
||||||
// Run callback
|
// Run callback if it is a function
|
||||||
if(this.options.callbackOnAddItem){
|
if(this.options.callbackOnAddItem){
|
||||||
if(isType('Function', this.options.callbackOnAddItem)) {
|
if(isType('Function', this.options.callbackOnAddItem)) {
|
||||||
this.options.callbackOnAddItem(item, value);
|
this.options.callbackOnAddItem(item, value);
|
||||||
} else {
|
} else {
|
||||||
console.error('Callback is not a function');
|
console.error('callbackOnAddItem: Callback is not a function');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -319,7 +353,7 @@ export class Choices {
|
||||||
if(isType('Function', this.options.callbackOnRemoveItem)) {
|
if(isType('Function', this.options.callbackOnRemoveItem)) {
|
||||||
this.options.callbackOnRemoveItem(value);
|
this.options.callbackOnRemoveItem(value);
|
||||||
} else {
|
} else {
|
||||||
console.error('Callback is not a function');
|
console.error('callbackOnRemoveItem: Callback is not a function');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -338,7 +372,7 @@ export class Choices {
|
||||||
|
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
if (!this.supports) console.error('Your browser doesn\'nt support shit');
|
if (!this.supports) console.error('init: Your browser doesn\'nt support shit');
|
||||||
this.initialised = true;
|
this.initialised = true;
|
||||||
this.render(this.element);
|
this.render(this.element);
|
||||||
}
|
}
|
||||||
|
@ -383,6 +417,10 @@ export class Choices {
|
||||||
input.placeholder = this.element.placeholder;
|
input.placeholder = this.element.placeholder;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(!this.options.addItems) {
|
||||||
|
input.disabled = true;
|
||||||
|
}
|
||||||
|
|
||||||
containerInner.appendChild(list);
|
containerInner.appendChild(list);
|
||||||
containerInner.appendChild(input);
|
containerInner.appendChild(input);
|
||||||
containerOuter.appendChild(containerInner);
|
containerOuter.appendChild(containerInner);
|
||||||
|
@ -498,6 +536,7 @@ export class Choices {
|
||||||
let input2 = document.getElementById(2);
|
let input2 = document.getElementById(2);
|
||||||
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 choices1 = new Choices({
|
let choices1 = new Choices({
|
||||||
element : input1,
|
element : input1,
|
||||||
|
@ -514,14 +553,24 @@ export class Choices {
|
||||||
let choices2 = new Choices({
|
let choices2 = new Choices({
|
||||||
element : input2,
|
element : input2,
|
||||||
allowDuplicates: false,
|
allowDuplicates: false,
|
||||||
editItems: true
|
editItems: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
let choices3 = new Choices({
|
let choices3 = new Choices({
|
||||||
element : input3
|
element : input3,
|
||||||
|
allowDuplicates: 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,}))$/
|
||||||
});
|
});
|
||||||
|
|
||||||
let choices4 = new Choices({
|
let choices4 = new Choices({
|
||||||
element : input4
|
element : input4,
|
||||||
|
addItems: false
|
||||||
|
});
|
||||||
|
|
||||||
|
let choices5 = new Choices({
|
||||||
|
element: input5,
|
||||||
|
prependValue: 'item-',
|
||||||
|
appendValue: `-${Date.now()}`
|
||||||
});
|
});
|
||||||
})();
|
})();
|
13
index.html
13
index.html
|
@ -12,7 +12,16 @@
|
||||||
<label for="2">Text input with preset values, custom classes and a placeholder. No duplicate values allowed</label>
|
<label for="2">Text input with preset values, custom classes and a placeholder. No duplicate values allowed</label>
|
||||||
<input id="2" type="text" data-choice value="preset-1, preset-2" placeholder="This is a placeholder" class="custom class">
|
<input id="2" type="text" data-choice value="preset-1, preset-2" placeholder="This is a placeholder" class="custom class">
|
||||||
|
|
||||||
<label for="3">Select input with two options</label>
|
<label for="3">Text input that only allows email addresses</label>
|
||||||
|
<input id="3" type="text" data-choice placeholder="This is a placeholder">
|
||||||
|
|
||||||
|
<label for="4">Text input that disables adding items</label>
|
||||||
|
<input id="4" type="text" data-choice value="josh@joshuajohnson.co.uk, joe@bloggs.co.uk" placeholder="This is a placeholder">
|
||||||
|
|
||||||
|
<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">
|
||||||
|
|
||||||
|
<!-- <label for="3">Select input with two options</label>
|
||||||
<select id="3" name="3" data-choice>
|
<select id="3" name="3" data-choice>
|
||||||
<option value="Value 1">Value 1</option>
|
<option value="Value 1">Value 1</option>
|
||||||
<option value="Value 2">Value 2</option>
|
<option value="Value 2">Value 2</option>
|
||||||
|
@ -33,7 +42,7 @@
|
||||||
<option value="Value 5">Value 5</option>
|
<option value="Value 5">Value 5</option>
|
||||||
<option value="Value 6">Value 6</option>
|
<option value="Value 6">Value 6</option>
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select> -->
|
||||||
|
|
||||||
<!-- <label for="4">Multiple select input with two options</label>
|
<!-- <label for="4">Multiple select input with two options</label>
|
||||||
<select id="4" name="4" data-choice multiple>
|
<select id="4" name="4" data-choice multiple>
|
||||||
|
|
Loading…
Reference in a new issue