2018-10-13 13:18:02 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width,initial-scale=1,user-scalable=no" >
< title > Choices< / title >
< meta name = description itemprop = description content = "A lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency." >
< link rel = "apple-touch-icon" sizes = "180x180" href = "../assets/images/apple-touch-icon.png" >
< link rel = "icon" type = "image/png" href = "../assets/images/favicon-32x32.png" sizes = "32x32" >
< link rel = "icon" type = "image/png" href = "../assets/images/favicon-16x16.png" sizes = "16x16" >
< link rel = "manifest" href = "../assets/images/manifest.json" >
< link rel = "mask-icon" href = "../assets/images/safari-pinned-tab.svg" color = "#00bcd4" >
< link rel = "shortcut icon" href = "../assets/images/favicon.ico" >
< meta name = "msapplication-config" content = "../assets/images/browserconfig.xml" >
< meta name = "theme-color" content = "#ffffff" >
<!-- Ignore these -->
2019-03-15 18:18:58 +01:00
< link rel = "stylesheet" href = "../assets/styles/base.min.css?version=6.0.3" >
2018-10-13 13:18:02 +02:00
<!-- End ignore these -->
<!-- Choices includes -->
2019-03-15 18:18:58 +01:00
< link rel = "stylesheet" href = "../assets/styles/choices.min.css?version=6.0.3" >
< script src = "../assets/scripts/choices.min.js?version=6.0.3" > < / script >
2018-10-13 13:18:02 +02:00
<!-- End Choices includes -->
< / head >
< body >
< div class = "container" >
< div class = "section" >
< h2 > Text inputs< / h2 >
< div data-test-hook = "basic" >
< label for = "choices-basic" > Basic< / label >
2018-10-18 23:18:17 +02:00
< input class = "form-control" id = "choices-basic" type = "text" >
2018-10-13 13:18:02 +02:00
< / div >
2018-10-17 23:36:37 +02:00
< div data-test-hook = "edit-items" >
< label for = "choices-edit-items" > Edit items< / label >
2018-10-18 23:18:17 +02:00
< input class = "form-control" id = "choices-edit-items" type = "text" >
2018-10-17 23:36:37 +02:00
< / div >
< div data-test-hook = "remove-button" >
< label for = "choices-remove-button" > Remove button< / label >
2018-10-18 23:18:17 +02:00
< input class = "form-control" id = "choices-remove-button" type = "text" >
2018-10-17 23:36:37 +02:00
< / div >
2018-10-13 13:18:02 +02:00
< div data-test-hook = "unique-values" >
< label for = "choices-unique-values" > Unique values< / label >
2018-10-18 23:18:17 +02:00
< input class = "form-control" id = "choices-unique-values" type = "text" >
2018-10-13 13:18:02 +02:00
< / div >
< div data-test-hook = "input-limit" >
< label for = "choices-input-limit" > Input limit< / label >
2018-10-18 23:18:17 +02:00
< input class = "form-control" id = "choices-input-limit" type = "text" >
2018-10-13 13:18:02 +02:00
< / div >
2019-02-12 19:35:46 +01:00
< div data-test-hook = "add-item-filter" >
< label for = "choices-add-item-filter" > Add item filter< / label >
< input class = "form-control" id = "choices-add-item-filter" type = "text" >
2018-10-13 13:18:02 +02:00
< / div >
2018-10-30 21:21:52 +01:00
< div data-test-hook = "adding-items-disabled" >
< label for = "choices-adding-items-disabled" > Add items disabled< / label >
< input class = "form-control" id = "choices-adding-items-disabled" type = "text" >
< / div >
< div data-test-hook = "disabled-via-attr" >
< label for = "choices-disabled-via-attr" > Disabled via attribute< / label >
< input class = "form-control" id = "choices-disabled-via-attr" type = "text" disabled >
2018-10-13 13:18:02 +02:00
< / div >
< div data-test-hook = "prepend-append" >
< label for = "choices-prepend-append" > Prepend/append< / label >
2018-10-18 23:18:17 +02:00
< input class = "form-control" id = "choices-prepend-append" type = "text" >
2018-10-13 13:18:02 +02:00
< / div >
2018-10-13 13:42:33 +02:00
< div data-test-hook = "prepopulated" >
< label for = "choices-prepopulated" > Pre-populated choices< / label >
2018-10-18 23:18:17 +02:00
< input class = "form-control" id = "choices-prepopulated" type = "text" >
< / div >
< div data-test-hook = "placeholder" >
< label for = "choices-placeholder" > Placeholder< / label >
< input class = "form-control" id = "choices-placeholder" type = "text" >
2018-10-13 13:42:33 +02:00
< / div >
2018-11-24 18:48:03 +01:00
< div data-test-hook = "within-form" >
< form >
< label for = "choices-within-form" > Within form< / label >
< input class = "form-control" id = "choices-within-form" type = "text" >
< / form >
< / div >
2018-10-13 13:18:02 +02:00
< / div >
< / div >
< script >
document.addEventListener('DOMContentLoaded', function() {
2018-10-17 23:36:37 +02:00
new Choices('#choices-basic');
new Choices('#choices-edit-items', {
2018-10-13 13:18:02 +02:00
editItems: true,
2018-10-17 23:36:37 +02:00
});
new Choices('#choices-remove-button', {
2018-10-13 13:18:02 +02:00
removeItemButton: true,
});
new Choices('#choices-unique-values', {
duplicateItemsAllowed: false,
});
new Choices('#choices-input-limit', {
maxItemCount: 5,
});
2019-02-12 19:35:46 +01:00
new Choices('#choices-add-item-filter', {
addItems: true,
addItemFilterFn: (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 expression = new RegExp(regex.source, 'i');
return expression.test(value);
},
2018-10-13 13:18:02 +02:00
});
2018-10-30 21:21:52 +01:00
new Choices('#choices-adding-items-disabled', {
2018-10-13 13:18:02 +02:00
addItems: false,
2018-10-30 21:21:52 +01:00
});
new Choices('#choices-disabled-via-attr');
2018-10-13 13:18:02 +02:00
new Choices('#choices-prepend-append', {
prependValue: 'before-',
appendValue: '-after',
});
2018-10-13 13:42:33 +02:00
new Choices('#choices-prepopulated', {
items: ['Josh Johnson', {
value: 'joe@bloggs.co.uk',
label: 'Joe Bloggs',
customProperties: {
2018-10-21 20:26:19 +02:00
description: 'Joe Blogg is such a generic name',
2018-10-13 13:42:33 +02:00
}
}],
});
2018-10-18 23:18:17 +02:00
new Choices('#choices-placeholder', {
placeholder: true,
placeholderValue: 'I am a placeholder',
});
2018-11-24 18:48:03 +01:00
new Choices('#choices-within-form');
2018-10-13 13:42:33 +02:00
});
2018-10-13 13:18:02 +02:00
< / script >
< / body >
< / html >