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 -->
< link rel = "stylesheet" href = "../assets/styles/base.min.css?version=3.0.2" >
<!-- End ignore these -->
<!-- Optional includes -->
< script src = "https://cdn.polyfill.io/v2/polyfill.js?features=es5,fetch,Element.prototype.classList,requestAnimationFrame,Node.insertBefore,Node.firstChild,Object.assign" > < / script >
<!-- End optional includes -->
<!-- Choices includes -->
< link rel = "stylesheet" href = "../assets/styles/choices.min.css?version=3.0.2" >
< script src = "../assets/scripts/choices.min.js?version=2.8.8" > < / script >
<!-- End Choices includes -->
<!-- [if lt IE 9]>
< style >
.hidden-ie { display: none; }
.visible-ie { display: block; }
< / style >
<![endif]-->
< / head >
< body >
< div class = "container" >
< div class = "section" >
< h2 > Text inputs< / h2 >
< div data-test-hook = "basic" >
< label for = "choices-basic" > Basic< / label >
< input class = "form-control" id = "choices-basic" type = "text" placeholder = "Enter something" >
< / div >
< div data-test-hook = "unique-values" >
< label for = "choices-unique-values" > Unique values< / label >
< input class = "form-control" id = "choices-unique-values" type = "text" placeholder = "This is a placeholder" >
< / 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" placeholder = "This is a placeholder" >
< / div >
< div data-test-hook = "regex-filter" >
< label for = "choices-regex-filter" > Regex filter< / label >
< input class = "form-control" id = "choices-regex-filter" type = "text" placeholder = "This is a placeholder" >
< / div >
< div data-test-hook = "disabled" >
< label for = "choices-disabled" > Disabled< / label >
< input class = "form-control" id = "choices-disabled" type = "text" placeholder = "This is a placeholder" >
< / div >
< div data-test-hook = "prepend-append" >
< label for = "choices-prepend-append" > Prepend/append< / label >
< input class = "form-control" id = "choices-prepend-append" type = "text" placeholder = "This is a placeholder" >
< / div >
2018-10-13 13:42:33 +02:00
< div data-test-hook = "prepopulated" >
< label for = "choices-prepopulated" > Pre-populated choices< / label >
< input class = "form-control" id = "choices-prepopulated" type = "text" placeholder = "This is a placeholder" >
< / div >
2018-10-13 13:18:02 +02:00
< / div >
< / div >
< script >
document.addEventListener('DOMContentLoaded', function() {
new Choices('#choices-basic', {
editItems: true,
removeItemButton: true,
});
new Choices('#choices-unique-values', {
duplicateItemsAllowed: false,
});
new Choices('#choices-input-limit', {
maxItemCount: 5,
});
new Choices('#choices-regex-filter', {
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,}))$/,
});
new Choices('#choices-disabled', {
addItems: false,
removeItems: false,
}).disable();
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: {
description: 'Joe Blogg is such a generic name'
}
}],
});
});
2018-10-13 13:18:02 +02:00
< / script >
< / body >
< / html >