mirror of
https://github.com/Choices-js/Choices.git
synced 2024-05-06 07:43:12 +02:00
test: Coverage for allowHTML
This commit is contained in:
viction
parent
6b16e93977
commit
859f6262eb
|
|
@ -1,6 +1,10 @@
|
|||
describe('Choices - text element', () => {
|
||||
beforeEach(() => {
|
||||
cy.visit('/text');
|
||||
cy.visit('/text', {
|
||||
onBeforeLoad(win) {
|
||||
cy.stub(win.console, 'warn').as('consoleWarn');
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
describe('scenarios', () => {
|
||||
|
|
@ -17,7 +21,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($el => {
|
||||
.should(($el) => {
|
||||
expect($el).to.contain(textInput);
|
||||
});
|
||||
});
|
||||
|
|
@ -42,7 +46,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=basic]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal(
|
||||
`Press Enter to add "${textInput}"`,
|
||||
|
|
@ -74,7 +78,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=edit-items]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.data('value')).to.equal(`${textInput}-edited`);
|
||||
});
|
||||
});
|
||||
|
|
@ -90,7 +94,7 @@ describe('Choices - text element', () => {
|
|||
it('highlights all items', () => {
|
||||
cy.get('[data-test-hook=edit-items]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.each($choice => {
|
||||
.each(($choice) => {
|
||||
expect($choice.hasClass('is-highlighted')).to.equal(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -124,7 +128,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=remove-button]')
|
||||
.find('.choices__list--multiple')
|
||||
.children()
|
||||
.should($items => {
|
||||
.should(($items) => {
|
||||
expect($items.length).to.equal(1);
|
||||
});
|
||||
|
||||
|
|
@ -137,7 +141,7 @@ describe('Choices - text element', () => {
|
|||
|
||||
cy.get('[data-test-hook=remove-button]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.should($items => {
|
||||
.should(($items) => {
|
||||
expect($items.length).to.equal(0);
|
||||
});
|
||||
});
|
||||
|
|
@ -152,7 +156,7 @@ describe('Choices - text element', () => {
|
|||
|
||||
cy.get('[data-test-hook=remove-button]')
|
||||
.find('.choices__input[hidden]')
|
||||
.then($input => {
|
||||
.then(($input) => {
|
||||
expect($input.val()).to.not.contain(textInput);
|
||||
});
|
||||
});
|
||||
|
|
@ -175,7 +179,7 @@ describe('Choices - text element', () => {
|
|||
.find('.choices__list--multiple')
|
||||
.first()
|
||||
.children()
|
||||
.should($items => {
|
||||
.should(($items) => {
|
||||
expect($items.length).to.equal(1);
|
||||
});
|
||||
});
|
||||
|
|
@ -185,7 +189,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=unique-values]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal(
|
||||
'Only unique values can be added',
|
||||
|
|
@ -212,7 +216,7 @@ describe('Choices - text element', () => {
|
|||
.find('.choices__list--multiple')
|
||||
.first()
|
||||
.children()
|
||||
.should($items => {
|
||||
.should(($items) => {
|
||||
expect($items.length).to.equal(inputLimit);
|
||||
});
|
||||
});
|
||||
|
|
@ -222,7 +226,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=input-limit]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal(
|
||||
`Only ${inputLimit} values can be added`,
|
||||
|
|
@ -245,7 +249,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=add-item-filter]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal(input);
|
||||
});
|
||||
});
|
||||
|
|
@ -261,7 +265,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=add-item-filter]')
|
||||
.find('.choices__list--dropdown')
|
||||
.should('be.visible')
|
||||
.should($dropdown => {
|
||||
.should(($dropdown) => {
|
||||
const dropdownText = $dropdown.text().trim();
|
||||
expect(dropdownText).to.equal(
|
||||
'Only values matching specific conditions can be added',
|
||||
|
|
@ -283,7 +287,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.data('value')).to.equal(`before-${textInput}-after`);
|
||||
});
|
||||
});
|
||||
|
|
@ -292,7 +296,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=prepend-append]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text()).to.not.contain(`before-${textInput}-after`);
|
||||
expect($choice.text()).to.contain(textInput);
|
||||
});
|
||||
|
|
@ -319,21 +323,21 @@ describe('Choices - text element', () => {
|
|||
it('pre-populates choices', () => {
|
||||
cy.get('[data-test-hook=prepopulated]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.should($choices => {
|
||||
.should(($choices) => {
|
||||
expect($choices.length).to.equal(2);
|
||||
});
|
||||
|
||||
cy.get('[data-test-hook=prepopulated]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.first()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
expect($choice.text().trim()).to.equal('Josh Johnson');
|
||||
});
|
||||
|
||||
cy.get('[data-test-hook=prepopulated]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($choice => {
|
||||
.should(($choice) => {
|
||||
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('inputting item', () => {
|
||||
describe('on enter key', () => {
|
||||
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(() => {
|
||||
// this will fail the test if the form submits
|
||||
throw new Error('Form submitted');
|
||||
|
|
@ -374,7 +420,7 @@ describe('Choices - text element', () => {
|
|||
cy.get('[data-test-hook=within-form]')
|
||||
.find('.choices__list--multiple .choices__item')
|
||||
.last()
|
||||
.should($el => {
|
||||
.should(($el) => {
|
||||
expect($el).to.contain(textInput);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory();
|
||||
|
|
@ -291,6 +291,10 @@ function () {
|
|||
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,
|
||||
// instead of concatenating with the default array
|
||||
{
|
||||
|
|
@ -2209,8 +2213,7 @@ function () {
|
|||
args[_i - 1] = arguments[_i];
|
||||
}
|
||||
|
||||
var classNames = this.config.classNames;
|
||||
return (_a = this._templates[template]).call.apply(_a, __spreadArray([this, classNames], args, false));
|
||||
return (_a = this._templates[template]).call.apply(_a, __spreadArray([this, this.config], args, false));
|
||||
};
|
||||
|
||||
Choices.prototype._createTemplates = function () {
|
||||
|
|
@ -3483,6 +3486,7 @@ exports.DEFAULT_CONFIG = {
|
|||
removeItems: true,
|
||||
removeItemButton: false,
|
||||
editItems: false,
|
||||
allowHTML: true,
|
||||
duplicateItemsAllowed: true,
|
||||
delimiter: ',',
|
||||
paste: true,
|
||||
|
|
@ -3644,7 +3648,7 @@ var sanitise = function (value) {
|
|||
return value;
|
||||
}
|
||||
|
||||
return value.replace(/&/g, '&').replace(/>/g, '&rt;').replace(/</g, '<').replace(/"/g, '"');
|
||||
return value.replace(/&/g, '&').replace(/>/g, '>').replace(/</g, '<').replace(/"/g, '"');
|
||||
};
|
||||
|
||||
exports.sanitise = sanitise;
|
||||
|
|
@ -4376,7 +4380,7 @@ Object.defineProperty(exports, "__esModule", ({
|
|||
}));
|
||||
var templates = {
|
||||
containerOuter: function (_a, dir, isSelectElement, isSelectOneElement, searchEnabled, passedElementType) {
|
||||
var containerOuter = _a.containerOuter;
|
||||
var containerOuter = _a.classNames.containerOuter;
|
||||
var div = Object.assign(document.createElement('div'), {
|
||||
className: containerOuter
|
||||
});
|
||||
|
|
@ -4403,32 +4407,39 @@ var templates = {
|
|||
return div;
|
||||
},
|
||||
containerInner: function (_a) {
|
||||
var containerInner = _a.containerInner;
|
||||
var containerInner = _a.classNames.containerInner;
|
||||
return Object.assign(document.createElement('div'), {
|
||||
className: containerInner
|
||||
});
|
||||
},
|
||||
itemList: function (_a, isSelectOneElement) {
|
||||
var list = _a.list,
|
||||
listSingle = _a.listSingle,
|
||||
listItems = _a.listItems;
|
||||
var _b = _a.classNames,
|
||||
list = _b.list,
|
||||
listSingle = _b.listSingle,
|
||||
listItems = _b.listItems;
|
||||
return Object.assign(document.createElement('div'), {
|
||||
className: "".concat(list, " ").concat(isSelectOneElement ? listSingle : listItems)
|
||||
});
|
||||
},
|
||||
placeholder: function (_a, value) {
|
||||
var placeholder = _a.placeholder;
|
||||
return Object.assign(document.createElement('div'), {
|
||||
className: placeholder,
|
||||
innerHTML: value
|
||||
});
|
||||
var _b;
|
||||
|
||||
var allowHTML = _a.allowHTML,
|
||||
placeholder = _a.classNames.placeholder;
|
||||
return Object.assign(document.createElement('div'), (_b = {
|
||||
className: placeholder
|
||||
}, _b[allowHTML ? 'innerHTML' : 'innerText'] = value, _b));
|
||||
},
|
||||
item: function (_a, _b, removeItemButton) {
|
||||
var item = _a.item,
|
||||
button = _a.button,
|
||||
highlightedState = _a.highlightedState,
|
||||
itemSelectable = _a.itemSelectable,
|
||||
placeholder = _a.placeholder;
|
||||
var _c, _d;
|
||||
|
||||
var allowHTML = _a.allowHTML,
|
||||
_e = _a.classNames,
|
||||
item = _e.item,
|
||||
button = _e.button,
|
||||
highlightedState = _e.highlightedState,
|
||||
itemSelectable = _e.itemSelectable,
|
||||
placeholder = _e.placeholder;
|
||||
var id = _b.id,
|
||||
value = _b.value,
|
||||
label = _b.label,
|
||||
|
|
@ -4437,10 +4448,9 @@ var templates = {
|
|||
disabled = _b.disabled,
|
||||
highlighted = _b.highlighted,
|
||||
isPlaceholder = _b.placeholder;
|
||||
var div = Object.assign(document.createElement('div'), {
|
||||
className: item,
|
||||
innerHTML: label
|
||||
});
|
||||
var div = Object.assign(document.createElement('div'), (_c = {
|
||||
className: item
|
||||
}, _c[allowHTML ? 'innerHTML' : 'innerText'] = label, _c));
|
||||
Object.assign(div.dataset, {
|
||||
item: '',
|
||||
id: id,
|
||||
|
|
@ -4471,11 +4481,10 @@ var templates = {
|
|||
/** @todo This MUST be localizable, not hardcoded! */
|
||||
|
||||
var REMOVE_ITEM_TEXT = 'Remove item';
|
||||
var removeButton = Object.assign(document.createElement('button'), {
|
||||
var removeButton = Object.assign(document.createElement('button'), (_d = {
|
||||
type: 'button',
|
||||
className: button,
|
||||
innerHTML: REMOVE_ITEM_TEXT
|
||||
});
|
||||
className: button
|
||||
}, _d[allowHTML ? 'innerHTML' : 'innerText'] = REMOVE_ITEM_TEXT, _d));
|
||||
removeButton.setAttribute('aria-label', "".concat(REMOVE_ITEM_TEXT, ": '").concat(value, "'"));
|
||||
removeButton.dataset.button = '';
|
||||
div.appendChild(removeButton);
|
||||
|
|
@ -4484,7 +4493,7 @@ var templates = {
|
|||
return div;
|
||||
},
|
||||
choiceList: function (_a, isSelectOneElement) {
|
||||
var list = _a.list;
|
||||
var list = _a.classNames.list;
|
||||
var div = Object.assign(document.createElement('div'), {
|
||||
className: list
|
||||
});
|
||||
|
|
@ -4497,9 +4506,13 @@ var templates = {
|
|||
return div;
|
||||
},
|
||||
choiceGroup: function (_a, _b) {
|
||||
var group = _a.group,
|
||||
groupHeading = _a.groupHeading,
|
||||
itemDisabled = _a.itemDisabled;
|
||||
var _c;
|
||||
|
||||
var allowHTML = _a.allowHTML,
|
||||
_d = _a.classNames,
|
||||
group = _d.group,
|
||||
groupHeading = _d.groupHeading,
|
||||
itemDisabled = _d.itemDisabled;
|
||||
var id = _b.id,
|
||||
value = _b.value,
|
||||
disabled = _b.disabled;
|
||||
|
|
@ -4517,19 +4530,22 @@ var templates = {
|
|||
div.setAttribute('aria-disabled', 'true');
|
||||
}
|
||||
|
||||
div.appendChild(Object.assign(document.createElement('div'), {
|
||||
className: groupHeading,
|
||||
innerHTML: value
|
||||
}));
|
||||
div.appendChild(Object.assign(document.createElement('div'), (_c = {
|
||||
className: groupHeading
|
||||
}, _c[allowHTML ? 'innerHTML' : 'innerText'] = value, _c)));
|
||||
return div;
|
||||
},
|
||||
choice: function (_a, _b, selectText) {
|
||||
var item = _a.item,
|
||||
itemChoice = _a.itemChoice,
|
||||
itemSelectable = _a.itemSelectable,
|
||||
selectedState = _a.selectedState,
|
||||
itemDisabled = _a.itemDisabled,
|
||||
placeholder = _a.placeholder;
|
||||
var _c;
|
||||
|
||||
var allowHTML = _a.allowHTML,
|
||||
_d = _a.classNames,
|
||||
item = _d.item,
|
||||
itemChoice = _d.itemChoice,
|
||||
itemSelectable = _d.itemSelectable,
|
||||
selectedState = _d.selectedState,
|
||||
itemDisabled = _d.itemDisabled,
|
||||
placeholder = _d.placeholder;
|
||||
var id = _b.id,
|
||||
value = _b.value,
|
||||
label = _b.label,
|
||||
|
|
@ -4538,11 +4554,9 @@ var templates = {
|
|||
isDisabled = _b.disabled,
|
||||
isSelected = _b.selected,
|
||||
isPlaceholder = _b.placeholder;
|
||||
var div = Object.assign(document.createElement('div'), {
|
||||
id: elementId,
|
||||
innerHTML: label,
|
||||
className: "".concat(item, " ").concat(itemChoice)
|
||||
});
|
||||
var div = Object.assign(document.createElement('div'), (_c = {
|
||||
id: elementId
|
||||
}, _c[allowHTML ? 'innerHTML' : 'innerText'] = label, _c.className = "".concat(item, " ").concat(itemChoice), _c));
|
||||
|
||||
if (isSelected) {
|
||||
div.classList.add(selectedState);
|
||||
|
|
@ -4572,10 +4586,12 @@ var templates = {
|
|||
return div;
|
||||
},
|
||||
input: function (_a, placeholderValue) {
|
||||
var input = _a.input,
|
||||
inputCloned = _a.inputCloned;
|
||||
var _b = _a.classNames,
|
||||
input = _b.input,
|
||||
inputCloned = _b.inputCloned;
|
||||
var inp = Object.assign(document.createElement('input'), {
|
||||
type: 'text',
|
||||
type: 'search',
|
||||
name: 'search_terms',
|
||||
className: "".concat(input, " ").concat(inputCloned),
|
||||
autocomplete: 'off',
|
||||
autocapitalize: 'off',
|
||||
|
|
@ -4587,18 +4603,23 @@ var templates = {
|
|||
return inp;
|
||||
},
|
||||
dropdown: function (_a) {
|
||||
var list = _a.list,
|
||||
listDropdown = _a.listDropdown;
|
||||
var _b = _a.classNames,
|
||||
list = _b.list,
|
||||
listDropdown = _b.listDropdown;
|
||||
var div = document.createElement('div');
|
||||
div.classList.add(list, listDropdown);
|
||||
div.setAttribute('aria-expanded', 'false');
|
||||
return div;
|
||||
},
|
||||
notice: function (_a, innerHTML, type) {
|
||||
var item = _a.item,
|
||||
itemChoice = _a.itemChoice,
|
||||
noResults = _a.noResults,
|
||||
noChoices = _a.noChoices;
|
||||
notice: function (_a, innerText, type) {
|
||||
var _b;
|
||||
|
||||
var allowHTML = _a.allowHTML,
|
||||
_c = _a.classNames,
|
||||
item = _c.item,
|
||||
itemChoice = _c.itemChoice,
|
||||
noResults = _c.noResults,
|
||||
noChoices = _c.noChoices;
|
||||
|
||||
if (type === void 0) {
|
||||
type = '';
|
||||
|
|
@ -4612,10 +4633,7 @@ var templates = {
|
|||
classes.push(noResults);
|
||||
}
|
||||
|
||||
return Object.assign(document.createElement('div'), {
|
||||
innerHTML: innerHTML,
|
||||
className: classes.join(' ')
|
||||
});
|
||||
return Object.assign(document.createElement('div'), (_b = {}, _b[allowHTML ? 'innerHTML' : 'innerText'] = innerText, _b.className = classes.join(' '), _b));
|
||||
},
|
||||
option: function (_a) {
|
||||
var label = _a.label,
|
||||
|
|
|
|||
2
public/assets/scripts/choices.min.js
vendored
2
public/assets/scripts/choices.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -76,6 +76,21 @@
|
|||
<input class="form-control" id="choices-unique-values" type="text" />
|
||||
</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">
|
||||
<label for="choices-input-limit">Input limit</label>
|
||||
<input class="form-control" id="choices-input-limit" type="text" />
|
||||
|
|
@ -134,25 +149,52 @@
|
|||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
new Choices('#choices-basic');
|
||||
new Choices('#choices-basic', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-edit-items', {
|
||||
allowHTML: true,
|
||||
editItems: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-remove-button', {
|
||||
allowHTML: true,
|
||||
removeItemButton: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-unique-values', {
|
||||
allowHTML: true,
|
||||
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', {
|
||||
allowHTML: true,
|
||||
maxItemCount: 5,
|
||||
});
|
||||
|
||||
new Choices('#choices-add-item-filter', {
|
||||
allowHTML: true,
|
||||
addItems: true,
|
||||
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,}))$/;
|
||||
|
|
@ -162,17 +204,22 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-adding-items-disabled', {
|
||||
allowHTML: true,
|
||||
addItems: false,
|
||||
});
|
||||
|
||||
new Choices('#choices-disabled-via-attr');
|
||||
new Choices('#choices-disabled-via-attr', {
|
||||
allowHTML: true,
|
||||
});
|
||||
|
||||
new Choices('#choices-prepend-append', {
|
||||
allowHTML: true,
|
||||
prependValue: 'before-',
|
||||
appendValue: '-after',
|
||||
});
|
||||
|
||||
new Choices('#choices-prepopulated', {
|
||||
allowHTML: true,
|
||||
items: [
|
||||
'Josh Johnson',
|
||||
{
|
||||
|
|
@ -186,11 +233,14 @@
|
|||
});
|
||||
|
||||
new Choices('#choices-placeholder', {
|
||||
allowHTML: true,
|
||||
placeholder: true,
|
||||
placeholderValue: 'I am a placeholder',
|
||||
});
|
||||
|
||||
new Choices('#choices-within-form');
|
||||
new Choices('#choices-within-form', {
|
||||
allowHTML: true,
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Reference in a new issue