deblan-mirror/Choices
deblan-mirror/Choices
1
0
Fork 0
mirror of https://github.com/Choices-js/Choices.git synced 2024-06-17 13:15:08 +02:00
Code Issues Projects Releases Wiki Activity

test: Coverage for allowHTML

Browse source
This commit is contained in:
viction 2021-12-24 17:33:32 +00:00
parent 6b16e93977
commit 859f6262eb
4 changed files with 199 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
cypress/integration/text.spec.ts
View file

@ -1,6 +1,10 @@
describe('Choices - text element', () => { describe('Choices - text element', () => {
beforeEach(() => { beforeEach(() => {
cy.visit('/text'); cy.visit('/text', {
onBeforeLoad(win) {
cy.stub(win.console, 'warn').as('consoleWarn');
},
});
}); });
describe('scenarios', () => { describe('scenarios', () => {
@ -17,7 +21,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.last() .last()
.should($el => { .should(($el) => {
expect($el).to.contain(textInput); expect($el).to.contain(textInput);
}); });
}); });
@ -42,7 +46,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=basic]') cy.get('[data-test-hook=basic]')
.find('.choices__list--dropdown') .find('.choices__list--dropdown')
.should('be.visible') .should('be.visible')
.should($dropdown => { .should(($dropdown) => {
const dropdownText = $dropdown.text().trim(); const dropdownText = $dropdown.text().trim();
expect(dropdownText).to.equal( expect(dropdownText).to.equal(
`Press Enter to add "${textInput}"`, `Press Enter to add "${textInput}"`,
@ -74,7 +78,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=edit-items]') cy.get('[data-test-hook=edit-items]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.last() .last()
.should($choice => { .should(($choice) => {
expect($choice.data('value')).to.equal(`${textInput}-edited`); expect($choice.data('value')).to.equal(`${textInput}-edited`);
}); });
}); });
@ -90,7 +94,7 @@ describe('Choices - text element', () => {
it('highlights all items', () => { it('highlights all items', () => {
cy.get('[data-test-hook=edit-items]') cy.get('[data-test-hook=edit-items]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.each($choice => { .each(($choice) => {
expect($choice.hasClass('is-highlighted')).to.equal(true); expect($choice.hasClass('is-highlighted')).to.equal(true);
}); });
}); });
@ -124,7 +128,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=remove-button]') cy.get('[data-test-hook=remove-button]')
.find('.choices__list--multiple') .find('.choices__list--multiple')
.children() .children()
.should($items => { .should(($items) => {
expect($items.length).to.equal(1); expect($items.length).to.equal(1);
}); });
@ -137,7 +141,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=remove-button]') cy.get('[data-test-hook=remove-button]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.should($items => { .should(($items) => {
expect($items.length).to.equal(0); expect($items.length).to.equal(0);
}); });
}); });
@ -152,7 +156,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=remove-button]') cy.get('[data-test-hook=remove-button]')
.find('.choices__input[hidden]') .find('.choices__input[hidden]')
.then($input => { .then(($input) => {
expect($input.val()).to.not.contain(textInput); expect($input.val()).to.not.contain(textInput);
}); });
}); });
@ -175,7 +179,7 @@ describe('Choices - text element', () => {
.find('.choices__list--multiple') .find('.choices__list--multiple')
.first() .first()
.children() .children()
.should($items => { .should(($items) => {
expect($items.length).to.equal(1); expect($items.length).to.equal(1);
}); });
}); });
@ -185,7 +189,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=unique-values]') cy.get('[data-test-hook=unique-values]')
.find('.choices__list--dropdown') .find('.choices__list--dropdown')
.should('be.visible') .should('be.visible')
.should($dropdown => { .should(($dropdown) => {
const dropdownText = $dropdown.text().trim(); const dropdownText = $dropdown.text().trim();
expect(dropdownText).to.equal( expect(dropdownText).to.equal(
'Only unique values can be added', 'Only unique values can be added',
@ -212,7 +216,7 @@ describe('Choices - text element', () => {
.find('.choices__list--multiple') .find('.choices__list--multiple')
.first() .first()
.children() .children()
.should($items => { .should(($items) => {
expect($items.length).to.equal(inputLimit); expect($items.length).to.equal(inputLimit);
}); });
}); });
@ -222,7 +226,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=input-limit]') cy.get('[data-test-hook=input-limit]')
.find('.choices__list--dropdown') .find('.choices__list--dropdown')
.should('be.visible') .should('be.visible')
.should($dropdown => { .should(($dropdown) => {
const dropdownText = $dropdown.text().trim(); const dropdownText = $dropdown.text().trim();
expect(dropdownText).to.equal( expect(dropdownText).to.equal(
`Only ${inputLimit} values can be added`, `Only ${inputLimit} values can be added`,
@ -245,7 +249,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=add-item-filter]') cy.get('[data-test-hook=add-item-filter]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.last() .last()
.should($choice => { .should(($choice) => {
expect($choice.text().trim()).to.equal(input); expect($choice.text().trim()).to.equal(input);
}); });
}); });
@ -261,7 +265,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=add-item-filter]') cy.get('[data-test-hook=add-item-filter]')
.find('.choices__list--dropdown') .find('.choices__list--dropdown')
.should('be.visible') .should('be.visible')
.should($dropdown => { .should(($dropdown) => {
const dropdownText = $dropdown.text().trim(); const dropdownText = $dropdown.text().trim();
expect(dropdownText).to.equal( expect(dropdownText).to.equal(
'Only values matching specific conditions can be added', 'Only values matching specific conditions can be added',
@ -283,7 +287,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=prepend-append]') cy.get('[data-test-hook=prepend-append]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.last() .last()
.should($choice => { .should(($choice) => {
expect($choice.data('value')).to.equal(`before-${textInput}-after`); expect($choice.data('value')).to.equal(`before-${textInput}-after`);
}); });
}); });
@ -292,7 +296,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=prepend-append]') cy.get('[data-test-hook=prepend-append]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.last() .last()
.should($choice => { .should(($choice) => {
expect($choice.text()).to.not.contain(`before-${textInput}-after`); expect($choice.text()).to.not.contain(`before-${textInput}-after`);
expect($choice.text()).to.contain(textInput); expect($choice.text()).to.contain(textInput);
}); });
@ -319,21 +323,21 @@ describe('Choices - text element', () => {
it('pre-populates choices', () => { it('pre-populates choices', () => {
cy.get('[data-test-hook=prepopulated]') cy.get('[data-test-hook=prepopulated]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.should($choices => { .should(($choices) => {
expect($choices.length).to.equal(2); expect($choices.length).to.equal(2);
}); });
cy.get('[data-test-hook=prepopulated]') cy.get('[data-test-hook=prepopulated]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.first() .first()
.should($choice => { .should(($choice) => {
expect($choice.text().trim()).to.equal('Josh Johnson'); expect($choice.text().trim()).to.equal('Josh Johnson');
}); });
cy.get('[data-test-hook=prepopulated]') cy.get('[data-test-hook=prepopulated]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.last() .last()
.should($choice => { .should(($choice) => {
expect($choice.text().trim()).to.equal('Joe Bloggs'); expect($choice.text().trim()).to.equal('Joe Bloggs');
}); });
}); });
@ -355,11 +359,53 @@ describe('Choices - text element', () => {
}); });
}); });
describe('allow html', () => {
describe('is undefined', () => {
it('logs a deprecation warning', () => {
cy.get('@consoleWarn').should(
'be.calledOnceWithExactly',
'Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.',
);
});
it('does not show html as text', () => {
cy.get('[data-test-hook=allowhtml-undefined]')
.find('.choices__list--multiple .choices__item')
.first()
.should(($choice) => {
expect($choice.text().trim()).to.equal('Mason Rogers');
});
});
});
describe('set to true', () => {
it('does not show html as text', () => {
cy.get('[data-test-hook=allowhtml-true]')
.find('.choices__list--multiple .choices__item')
.first()
.should(($choice) => {
expect($choice.text().trim()).to.equal('Mason Rogers');
});
});
});
describe('set to false', () => {
it('shows html as text', () => {
cy.get('[data-test-hook=allowhtml-false]')
.find('.choices__list--multiple .choices__item')
.first()
.should(($choice) => {
expect($choice.text().trim()).to.equal('<b>Mason Rogers</b>');
});
});
});
});
describe('within form', () => { describe('within form', () => {
describe('inputting item', () => { describe('inputting item', () => {
describe('on enter key', () => { describe('on enter key', () => {
it('does not submit form', () => { it('does not submit form', () => {
cy.get('[data-test-hook=within-form] form').then($form => { cy.get('[data-test-hook=within-form] form').then(($form) => {
$form.submit(() => { $form.submit(() => {
// this will fail the test if the form submits // this will fail the test if the form submits
throw new Error('Form submitted'); throw new Error('Form submitted');
@ -374,7 +420,7 @@ describe('Choices - text element', () => {
cy.get('[data-test-hook=within-form]') cy.get('[data-test-hook=within-form]')
.find('.choices__list--multiple .choices__item') .find('.choices__list--multiple .choices__item')
.last() .last()
.should($el => { .should(($el) => {
expect($el).to.contain(textInput); expect($el).to.contain(textInput);
}); });
}); });

138
public/assets/scripts/choices.js
View file

@ -1,4 +1,4 @@
/*! choices.js v9.0.1 | © 2021 Josh Johnson | https://github.com/jshjohnson/Choices#readme */ /*! choices.js v9.1.0 | © 2021 Josh Johnson | https://github.com/jshjohnson/Choices#readme */
(function webpackUniversalModuleDefinition(root, factory) { (function webpackUniversalModuleDefinition(root, factory) {
if(typeof exports === 'object' && typeof module === 'object') if(typeof exports === 'object' && typeof module === 'object')
module.exports = factory(); module.exports = factory();
@ -291,6 +291,10 @@ function () {
userConfig = {}; userConfig = {};
} }
if (userConfig.allowHTML === undefined) {
console.warn('Deprecation warning: allowHTML in the future will be defaulted to false. You must explicitly set it to true to properly display html tags in choices.');
}
this.config = deepmerge_1.default.all([defaults_1.DEFAULT_CONFIG, Choices.defaults.options, userConfig], // When merging array configs, replace with a copy of the userConfig array, this.config = deepmerge_1.default.all([defaults_1.DEFAULT_CONFIG, Choices.defaults.options, userConfig], // When merging array configs, replace with a copy of the userConfig array,
// instead of concatenating with the default array // instead of concatenating with the default array
{ {
@ -2209,8 +2213,7 @@ function () {
args[_i - 1] = arguments[_i]; args[_i - 1] = arguments[_i];
} }
var classNames = this.config.classNames; return (_a = this._templates[template]).call.apply(_a, __spreadArray([this, this.config], args, false));
return (_a = this._templates[template]).call.apply(_a, __spreadArray([this, classNames], args, false));
}; };
Choices.prototype._createTemplates = function () { Choices.prototype._createTemplates = function () {
@ -3483,6 +3486,7 @@ exports.DEFAULT_CONFIG = {
removeItems: true, removeItems: true,
removeItemButton: false, removeItemButton: false,
editItems: false, editItems: false,
allowHTML: true,
duplicateItemsAllowed: true, duplicateItemsAllowed: true,
delimiter: ',', delimiter: ',',
paste: true, paste: true,
@ -3644,7 +3648,7 @@ var sanitise = function (value) {
return value; return value;
} }
return value.replace(/&/g, '&amp;').replace(/>/g, '&rt;').replace(/</g, '&lt;').replace(/"/g, '&quot;'); return value.replace(/&/g, '&amp;').replace(/>/g, '&gt;').replace(/</g, '&lt;').replace(/"/g, '&quot;');
}; };
exports.sanitise = sanitise; exports.sanitise = sanitise;
@ -4376,7 +4380,7 @@ Object.defineProperty(exports, "__esModule", ({
})); }));
var templates = { var templates = {
containerOuter: function (_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType) { containerOuter: function (_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType) {
var containerOuter = _a.containerOuter; var containerOuter = _a.classNames.containerOuter;
var div = Object.assign(document.createElement('div'), { var div = Object.assign(document.createElement('div'), {
className: containerOuter className: containerOuter
}); });
@ -4403,32 +4407,39 @@ var templates = {
return div; return div;
}, },
containerInner: function (_a) { containerInner: function (_a) {
var containerInner = _a.containerInner; var containerInner = _a.classNames.containerInner;
return Object.assign(document.createElement('div'), { return Object.assign(document.createElement('div'), {
className: containerInner className: containerInner
}); });
}, },
itemList: function (_a, isSelectOneElement) { itemList: function (_a, isSelectOneElement) {
var list = _a.list, var _b = _a.classNames,
listSingle = _a.listSingle, list = _b.list,
listItems = _a.listItems; listSingle = _b.listSingle,
listItems = _b.listItems;
return Object.assign(document.createElement('div'), { return Object.assign(document.createElement('div'), {
className: "".concat(list, " ").concat(isSelectOneElement ? listSingle : listItems) className: "".concat(list, " ").concat(isSelectOneElement ? listSingle : listItems)
}); });
}, },
placeholder: function (_a, value) { placeholder: function (_a, value) {
var placeholder = _a.placeholder; var _b;
return Object.assign(document.createElement('div'), {
className: placeholder, var allowHTML = _a.allowHTML,
innerHTML: value placeholder = _a.classNames.placeholder;
}); return Object.assign(document.createElement('div'), (_b = {
className: placeholder
}, _b[allowHTML ? 'innerHTML' : 'innerText'] = value, _b));
}, },
item: function (_a, _b, removeItemButton) { item: function (_a, _b, removeItemButton) {
var item = _a.item, var _c, _d;
button = _a.button,
highlightedState = _a.highlightedState, var allowHTML = _a.allowHTML,
itemSelectable = _a.itemSelectable, _e = _a.classNames,
placeholder = _a.placeholder; item = _e.item,
button = _e.button,
highlightedState = _e.highlightedState,
itemSelectable = _e.itemSelectable,
placeholder = _e.placeholder;
var id = _b.id, var id = _b.id,
value = _b.value, value = _b.value,
label = _b.label, label = _b.label,
@ -4437,10 +4448,9 @@ var templates = {
disabled = _b.disabled, disabled = _b.disabled,
highlighted = _b.highlighted, highlighted = _b.highlighted,
isPlaceholder = _b.placeholder; isPlaceholder = _b.placeholder;
var div = Object.assign(document.createElement('div'), { var div = Object.assign(document.createElement('div'), (_c = {
className: item, className: item
innerHTML: label }, _c[allowHTML ? 'innerHTML' : 'innerText'] = label, _c));
});
Object.assign(div.dataset, { Object.assign(div.dataset, {
item: '', item: '',
id: id, id: id,
@ -4471,11 +4481,10 @@ var templates = {
/** @todo This MUST be localizable, not hardcoded! */ /** @todo This MUST be localizable, not hardcoded! */
var REMOVE_ITEM_TEXT = 'Remove item'; var REMOVE_ITEM_TEXT = 'Remove item';
var removeButton = Object.assign(document.createElement('button'), { var removeButton = Object.assign(document.createElement('button'), (_d = {
type: 'button', type: 'button',
className: button, className: button
innerHTML: REMOVE_ITEM_TEXT }, _d[allowHTML ? 'innerHTML' : 'innerText'] = REMOVE_ITEM_TEXT, _d));
});
removeButton.setAttribute('aria-label', "".concat(REMOVE_ITEM_TEXT, ": '").concat(value, "'")); removeButton.setAttribute('aria-label', "".concat(REMOVE_ITEM_TEXT, ": '").concat(value, "'"));
removeButton.dataset.button = ''; removeButton.dataset.button = '';
div.appendChild(removeButton); div.appendChild(removeButton);
@ -4484,7 +4493,7 @@ var templates = {
return div; return div;
}, },
choiceList: function (_a, isSelectOneElement) { choiceList: function (_a, isSelectOneElement) {
var list = _a.list; var list = _a.classNames.list;
var div = Object.assign(document.createElement('div'), { var div = Object.assign(document.createElement('div'), {
className: list className: list
}); });
@ -4497,9 +4506,13 @@ var templates = {
return div; return div;
}, },
choiceGroup: function (_a, _b) { choiceGroup: function (_a, _b) {
var group = _a.group, var _c;
groupHeading = _a.groupHeading,
itemDisabled = _a.itemDisabled; var allowHTML = _a.allowHTML,
_d = _a.classNames,
group = _d.group,
groupHeading = _d.groupHeading,
itemDisabled = _d.itemDisabled;
var id = _b.id, var id = _b.id,
value = _b.value, value = _b.value,
disabled = _b.disabled; disabled = _b.disabled;
@ -4517,19 +4530,22 @@ var templates = {
div.setAttribute('aria-disabled', 'true'); div.setAttribute('aria-disabled', 'true');
} }
div.appendChild(Object.assign(document.createElement('div'), { div.appendChild(Object.assign(document.createElement('div'), (_c = {
className: groupHeading, className: groupHeading
innerHTML: value }, _c[allowHTML ? 'innerHTML' : 'innerText'] = value, _c)));
}));
return div; return div;
}, },
choice: function (_a, _b, selectText) { choice: function (_a, _b, selectText) {
var item = _a.item, var _c;
itemChoice = _a.itemChoice,
itemSelectable = _a.itemSelectable, var allowHTML = _a.allowHTML,
selectedState = _a.selectedState, _d = _a.classNames,
itemDisabled = _a.itemDisabled, item = _d.item,
placeholder = _a.placeholder; itemChoice = _d.itemChoice,
itemSelectable = _d.itemSelectable,
selectedState = _d.selectedState,
itemDisabled = _d.itemDisabled,
placeholder = _d.placeholder;
var id = _b.id, var id = _b.id,
value = _b.value, value = _b.value,
label = _b.label, label = _b.label,
@ -4538,11 +4554,9 @@ var templates = {
isDisabled = _b.disabled, isDisabled = _b.disabled,
isSelected = _b.selected, isSelected = _b.selected,
isPlaceholder = _b.placeholder; isPlaceholder = _b.placeholder;
var div = Object.assign(document.createElement('div'), { var div = Object.assign(document.createElement('div'), (_c = {
id: elementId, id: elementId
innerHTML: label, }, _c[allowHTML ? 'innerHTML' : 'innerText'] = label, _c.className = "".concat(item, " ").concat(itemChoice), _c));
className: "".concat(item, " ").concat(itemChoice)
});
if (isSelected) { if (isSelected) {
div.classList.add(selectedState); div.classList.add(selectedState);
@ -4572,10 +4586,12 @@ var templates = {
return div; return div;
}, },
input: function (_a, placeholderValue) { input: function (_a, placeholderValue) {
var input = _a.input, var _b = _a.classNames,
inputCloned = _a.inputCloned; input = _b.input,
inputCloned = _b.inputCloned;
var inp = Object.assign(document.createElement('input'), { var inp = Object.assign(document.createElement('input'), {
type: 'text', type: 'search',
name: 'search_terms',
className: "".concat(input, " ").concat(inputCloned), className: "".concat(input, " ").concat(inputCloned),
autocomplete: 'off', autocomplete: 'off',
autocapitalize: 'off', autocapitalize: 'off',
@ -4587,18 +4603,23 @@ var templates = {
return inp; return inp;
}, },
dropdown: function (_a) { dropdown: function (_a) {
var list = _a.list, var _b = _a.classNames,
listDropdown = _a.listDropdown; list = _b.list,
listDropdown = _b.listDropdown;
var div = document.createElement('div'); var div = document.createElement('div');
div.classList.add(list, listDropdown); div.classList.add(list, listDropdown);
div.setAttribute('aria-expanded', 'false'); div.setAttribute('aria-expanded', 'false');
return div; return div;
}, },
notice: function (_a, innerHTML, type) { notice: function (_a, innerText, type) {
var item = _a.item, var _b;
itemChoice = _a.itemChoice,
noResults = _a.noResults, var allowHTML = _a.allowHTML,
noChoices = _a.noChoices; _c = _a.classNames,
item = _c.item,
itemChoice = _c.itemChoice,
noResults = _c.noResults,
noChoices = _c.noChoices;
if (type === void 0) { if (type === void 0) {
type = ''; type = '';
@ -4612,10 +4633,7 @@ var templates = {
classes.push(noResults); classes.push(noResults);
} }
return Object.assign(document.createElement('div'), { return Object.assign(document.createElement('div'), (_b = {}, _b[allowHTML ? 'innerHTML' : 'innerText'] = innerText, _b.className = classes.join(' '), _b));
innerHTML: innerHTML,
className: classes.join(' ')
});
}, },
option: function (_a) { option: function (_a) {
var label = _a.label, var label = _a.label,

2
public/assets/scripts/choices.min.js vendored
View file

File diff suppressed because one or more lines are too long

56
public/test/text/index.html
View file

@ -76,6 +76,21 @@
<input class="form-control" id="choices-unique-values" type="text" /> <input class="form-control" id="choices-unique-values" type="text" />
</div> </div>
<div data-test-hook="allowhtml-undefined">
<label for="allowhtml-undefined">HTML allowed by default</label>
<input class="form-control" id="allowhtml-undefined" type="text" />
</div>
<div data-test-hook="allowhtml-true">
<label for="allowhtml-true">HTML allowed</label>
<input class="form-control" id="allowhtml-true" type="text" />
</div>
<div data-test-hook="allowhtml-false">
<label for="allowhtml-false">HTML disabled</label>
<input class="form-control" id="allowhtml-false" type="text" />
</div>
<div data-test-hook="input-limit"> <div data-test-hook="input-limit">
<label for="choices-input-limit">Input limit</label> <label for="choices-input-limit">Input limit</label>
<input class="form-control" id="choices-input-limit" type="text" /> <input class="form-control" id="choices-input-limit" type="text" />
@ -134,25 +149,52 @@
</div> </div>
<script> <script>
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
new Choices('#choices-basic'); new Choices('#choices-basic', {
allowHTML: true,
});
new Choices('#choices-edit-items', { new Choices('#choices-edit-items', {
allowHTML: true,
editItems: true, editItems: true,
}); });
new Choices('#choices-remove-button', { new Choices('#choices-remove-button', {
allowHTML: true,
removeItemButton: true, removeItemButton: true,
}); });
new Choices('#choices-unique-values', { new Choices('#choices-unique-values', {
allowHTML: true,
duplicateItemsAllowed: false, duplicateItemsAllowed: false,
}); });
new Choices('#allowhtml-undefined', {
items: [
'<b>Mason Rogers</b>'
],
});
new Choices('#allowhtml-true', {
allowHTML: true,
items: [
'<b>Mason Rogers</b>'
],
});
new Choices('#allowhtml-false', {
allowHTML: false,
items: [
'<b>Mason Rogers</b>'
],
});
new Choices('#choices-input-limit', { new Choices('#choices-input-limit', {
allowHTML: true,
maxItemCount: 5, maxItemCount: 5,
}); });
new Choices('#choices-add-item-filter', { new Choices('#choices-add-item-filter', {
allowHTML: true,
addItems: true, addItems: true,
addItemFilter: value => { addItemFilter: value => {
const regex = /^(([^<>()\[\]\\.,;:\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 regex = /^(([^<>()\[\]\\.,;:\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,}))$/;
@ -162,17 +204,22 @@
}); });
new Choices('#choices-adding-items-disabled', { new Choices('#choices-adding-items-disabled', {
allowHTML: true,
addItems: false, addItems: false,
}); });
new Choices('#choices-disabled-via-attr'); new Choices('#choices-disabled-via-attr', {
allowHTML: true,
});
new Choices('#choices-prepend-append', { new Choices('#choices-prepend-append', {
allowHTML: true,
prependValue: 'before-', prependValue: 'before-',
appendValue: '-after', appendValue: '-after',
}); });
new Choices('#choices-prepopulated', { new Choices('#choices-prepopulated', {
allowHTML: true,
items: [ items: [
'Josh Johnson', 'Josh Johnson',
{ {
@ -186,11 +233,14 @@
}); });
new Choices('#choices-placeholder', { new Choices('#choices-placeholder', {
allowHTML: true,
placeholder: true, placeholder: true,
placeholderValue: 'I am a placeholder', placeholderValue: 'I am a placeholder',
}); });
new Choices('#choices-within-form'); new Choices('#choices-within-form', {
allowHTML: true,
});
}); });
</script> </script>
</body> </body>