2018-10-14 17:00:46 +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:23 +01:00
< link rel = "stylesheet" href = "../assets/styles/base.min.css?version=6.0.3" >
2018-10-14 17:00:46 +02:00
<!-- End ignore these -->
<!-- Choices includes -->
2019-03-15 18:18:23 +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-14 17:00:46 +02:00
<!-- End Choices includes -->
< / head >
< body >
< div class = "container" >
< div class = "section" >
< h2 > Select one inputs< / h2 >
< div data-test-hook = "basic" >
< label for = "choices-basic" > Basic< / label >
2018-11-09 09:38:12 +01:00
< button class = "disable push-bottom" > Disable< / button >
< button class = "enable push-bottom" > Enable< / button >
2018-10-18 23:18:17 +02:00
< select class = "form-control" name = "choices-basic" id = "choices-basic" >
2018-10-27 22:00:49 +02:00
< option value = "Choice 1" > Choice 1< / option >
< option value = "Choice 2" > Choice 2< / option >
< option value = "Find me" > Choice 3< / option >
< option value = "Choice 4" > Choice 4< / option >
2018-10-17 23:36:37 +02:00
< / select >
< / div >
< div data-test-hook = "remove-button" >
< label for = "choices-remove-button" > Remove button< / label >
2018-10-18 23:18:17 +02:00
< select class = "form-control" name = "choices-remove-button" id = "choices-remove-button" >
2018-10-27 22:00:49 +02:00
< option value = "Choice 1" > Choice 1< / option >
< option value = "Choice 2" > Choice 2< / option >
< option value = "Choice 3" > Choice 3< / option >
< option value = "Choice 4" > Choice 4< / option >
2018-10-14 17:00:46 +02:00
< / select >
< / div >
< div data-test-hook = "disabled-choice" >
< label for = "choices-disabled-choice" > Disabled choice< / label >
2018-10-18 23:18:17 +02:00
< select class = "form-control" name = "choices-disabled-choice" id = "choices-disabled-choice" >
2018-10-27 22:00:49 +02:00
< option value = "Choice 1" > Choice 1< / option >
< option value = "Choice 2" > Choice 2< / option >
< option value = "Choice 3" > Choice 3< / option >
< option value = "Choice 4" disabled > Choice 4< / option >
2018-10-14 17:00:46 +02:00
< / select >
< / div >
2018-10-21 20:26:19 +02:00
< div data-test-hook = "add-items-disabled" >
< label for = "choices-add-items-disabled" > Add items disabled< / label >
< select class = "form-control" name = "choices-add-items-disabled" id = "choices-add-items-disabled" >
2018-10-27 22:00:49 +02:00
< option value = "Choice 1" selected > Choice 1< / option >
< option value = "Choice 2" > Choice 2< / option >
< option value = "Choice 3" > Choice 3< / option >
2018-10-21 20:26:19 +02:00
< / select >
< / div >
2018-10-30 21:21:52 +01:00
< div data-test-hook = "disabled-via-attr" >
< label for = "choices-disabled-via-attr" > Disabled via attribute< / label >
< select class = "form-control" name = "choices-disabled-via-attr" id = "choices-disabled-via-attr" disabled >
< option value = "Choice 1" selected > Choice 1< / option >
< option value = "Choice 2" > Choice 2< / option >
< option value = "Choice 3" > Choice 3< / option >
< / select >
< / div >
2018-10-14 17:00:46 +02:00
< div data-test-hook = "prepend-append" >
< label for = "choices-prepend-append" > Prepend/append< / label >
2018-10-18 23:18:17 +02:00
< select class = "form-control" name = "choices-prepend-append" id = "choices-prepend-append" >
2018-10-27 22:00:49 +02:00
< option value = "Choice 1" > Choice 1< / option >
< option value = "Choice 2" > Choice 2< / option >
< option value = "Choice 3" > Choice 3< / option >
2018-10-14 17:00:46 +02:00
< / select >
< / div >
2018-10-17 23:36:37 +02:00
< div data-test-hook = "render-choice-limit" >
< label for = "choices-render-choice-limit" > Render choice limit< / label >
2018-10-18 23:18:17 +02:00
< select class = "form-control" name = "choices-render-choice-limit" id = "choices-render-choice-limit" >
2018-10-27 22:00:49 +02:00
< option value = "Choice 1" > Choice 1< / option >
< option value = "Choice 2" > Choice 2< / option >
< option value = "Choice 3" > Choice 3< / option >
2018-10-17 23:36:37 +02:00
< / select >
< / div >
2018-10-18 00:13:24 +02:00
< div data-test-hook = "search-disabled" >
< label for = "choices-search-disabled" > Search disabled< / label >
2018-10-18 23:18:17 +02:00
< select class = "form-control" name = "choices-search-disabled" id = "choices-search-disabled" >
2018-10-27 22:00:49 +02:00
< option value = "Choice 1" > Choice 1< / option >
< option value = "Choice 2" > Choice 2< / option >
< option value = "Choice 3" > Choice 3< / option >
2018-10-18 00:13:24 +02:00
< / select >
< / div >
< div data-test-hook = "search-floor" >
< label for = "choices-search-floor" > Search floor< / label >
2018-10-18 23:18:17 +02:00
< select class = "form-control" name = "choices-search-floor" id = "choices-search-floor" >
2018-10-27 22:00:49 +02:00
< option value = "Choice 1" > Choice 1< / option >
< option value = "Choice 2" > Choice 2< / option >
< option value = "Choice 3" > Choice 3< / option >
2018-10-18 00:13:24 +02:00
< / select >
< / div >
2018-10-20 14:32:58 +02:00
< div data-test-hook = "remote-data" >
< label for = "choices-remote-data" > Remote data< / label >
< select class = "form-control" name = "choices-remote-data" id = "choices-remote-data" > < / select >
< / div >
2018-10-27 17:25:46 +02:00
< div data-test-hook = "scrolling-dropdown" >
< label for = "choices-scrolling-dropdown" > Scrolling dropdown< / label >
< select class = "form-control" name = "choices-scrolling-dropdown" id = "choices-scrolling-dropdown" >
2018-10-27 22:00:49 +02:00
< option value = "Choice 1" > Choice 1< / option >
< option value = "Choice 2" > Choice 2< / option >
< option value = "Choice 3" > Choice 3< / option >
< option value = "Choice 4" > Choice 4< / option >
< option value = "Choice 5" > Choice 5< / option >
< option value = "Choice 6" > Choice 6< / option >
< option value = "Choice 7" > Choice 7< / option >
< option value = "Choice 8" > Choice 8< / option >
< option value = "Choice 9" > Choice 9< / option >
< option value = "Choice 10" > Choice 10< / option >
< option value = "Choice 11" > Choice 11< / option >
< option value = "Choice 12" > Choice 12< / option >
< option value = "Choice 13" > Choice 13< / option >
< option value = "Choice 14" > Choice 14< / option >
< option value = "Choice 15" > Choice 15< / option >
2018-10-27 17:25:46 +02:00
< / select >
< / div >
2018-10-27 19:12:15 +02:00
< div data-test-hook = "groups" >
< label for = "choices-groups" > Choice groups< / label >
< select class = "form-control" name = "choices-groups" id = "choices-groups" multiple >
< optgroup label = "UK" >
< option value = "London" > London< / option >
< option value = "Manchester" > Manchester< / option >
< option value = "Liverpool" > Liverpool< / option >
< / optgroup >
< optgroup label = "FR" >
< option value = "Paris" > Paris< / option >
< option value = "Lyon" > Lyon< / option >
< option value = "Marseille" > Marseille< / option >
< / optgroup >
< / select >
< / div >
2018-10-27 22:00:49 +02:00
2018-10-27 22:07:01 +02:00
< div data-test-hook = "parent-child" >
2018-10-27 22:00:49 +02:00
< label for = "choices-parent" > Parent< / label >
< select class = "form-control" name = "choices-parent" id = "choices-parent" >
< option value = "Parent choice 1" > Parent choice 1< / option >
< option value = "Parent choice 2" > Parent choice 2< / option >
< option value = "Parent choice 3" > Parent choice 3< / option >
< / select >
< label for = "choices-child" > Child< / label >
< select class = "form-control" name = "choices-child" id = "choices-child" >
< option value = "Child choice 1" > Child choice 1< / option >
< option value = "Child choice 2" > Child choice 2< / option >
< option value = "Child choice 3" > Child choice 3< / option >
< / select >
< / div >
2018-11-03 13:00:37 +01:00
< div data-test-hook = "custom-properties" >
< label for = "choices-custom-properties" > Custom properties< / label >
< select class = "form-control" name = "choices-custom-properties" id = "choices-custom-properties" > < / select >
< / div >
2018-11-24 18:48:03 +01:00
2019-02-22 23:04:55 +01:00
< div data-test-hook = "non-string-values" >
< label for = "choices-non-string-values" > Non-string values< / label >
< select class = "form-control" name = "choices-non-string-values" id = "choices-non-string-values" > < / select >
< / div >
2018-11-24 18:48:03 +01:00
< div data-test-hook = "within-form" >
< form >
< label for = "choices-within-form" > Within form< / label >
< select class = "form-control" name = "choices-within-form" id = "choices-within-form" >
< option value = "Choice 1" > Choice 1< / option >
< / select >
< / form >
< / div >
2018-11-25 13:48:49 +01:00
< div data-test-hook = "set-choice-by-value" >
< label for = "choices-set-choice-by-value" > Dynamically set choice by value< / label >
< select class = "form-control" name = "choices-set-choice-by-value" id = "choices-set-choice-by-value" >
< option value = "Choice 1" > Choice 1< / option >
< option value = "Choice 2" > Choice 2< / option >
< option value = "Choice 3" > Choice 3< / option >
< / select >
< / div >
2019-01-19 15:47:22 +01:00
< div data-test-hook = "search-by-label" >
< label for = "choices-search-by-label" > Search by label< / label >
< select class = "form-control" name = "choices-search-by-label" id = "choices-search-by-label" >
< option value = "value1" > label1< / option >
< option value = "value2" > label2< / option >
< / select >
< / div >
2018-10-14 17:00:46 +02:00
< / div >
< / div >
< script >
document.addEventListener('DOMContentLoaded', function() {
2018-11-03 13:26:02 +01:00
const choicesBasic = new Choices('#choices-basic');
2018-11-09 09:38:12 +01:00
document.querySelector('button.disable').addEventListener('click', () => {
choicesBasic.disable();
});
document.querySelector('button.enable').addEventListener('click', () => {
choicesBasic.enable();
});
2018-10-17 23:36:37 +02:00
new Choices('#choices-remove-button', {
2018-10-14 17:00:46 +02:00
removeItemButton: true,
});
new Choices('#choices-disabled-choice', {
removeItemButton: true,
});
2018-10-21 20:26:19 +02:00
new Choices('#choices-add-items-disabled', {
addItems: false,
});
2018-10-30 21:21:52 +01:00
new Choices('#choices-disabled-via-attr');
2018-10-14 17:00:46 +02:00
new Choices('#choices-prepend-append', {
prependValue: 'before-',
appendValue: '-after',
});
2018-10-17 23:36:37 +02:00
new Choices('#choices-render-choice-limit', {
renderChoiceLimit: 1
});
2018-10-18 00:13:24 +02:00
new Choices('#choices-search-disabled', {
searchEnabled: false
})
new Choices('#choices-search-floor', {
2018-10-27 22:00:49 +02:00
searchFloor: 5,
2018-10-18 00:13:24 +02:00
});
2018-10-20 14:32:58 +02:00
new Choices('#choices-remote-data', {
shouldSort: false,
}).ajax((callback) => {
fetch('/data')
.then((response) => {
response.json().then((data) => {
callback(data, 'value', 'label');
});
})
.catch((error) => {
console.error(error);
});
});
2018-10-27 17:25:46 +02:00
new Choices('#choices-scrolling-dropdown', {
shouldSort: false,
});
2018-10-27 19:12:15 +02:00
new Choices('#choices-groups');
2018-10-27 22:00:49 +02:00
const parent = new Choices('#choices-parent');
const child = new Choices('#choices-child').disable();
parent.passedElement.element.addEventListener('change', (event) => {
if (event.detail.value === 'Parent choice 2') {
child.enable();
} else {
child.disable();
}
});
2018-11-03 13:00:37 +01:00
new Choices('#choices-custom-properties', {
searchFields: ['label', 'value', 'customProperties.country'],
choices: [
{
id: 1,
value: 'London',
label: 'London',
customProperties: {
country: 'United Kingdom',
},
},
{
id: 2,
value: 'Berlin',
label: 'Berlin',
customProperties: {
country: 'Germany',
},
},
{
id: 3,
value: 'Lisbon',
label: 'Lisbon',
customProperties: {
country: 'Portugal',
},
}
]
});
2018-11-24 18:48:03 +01:00
2019-02-22 23:04:55 +01:00
new Choices('#choices-non-string-values', {
choices: [
{
id: 1,
label: 'Number',
value: 1,
},
{
id: 2,
label: 'Boolean',
value: true,
},
{
id: 3,
label: 'Object',
value: {
test: true,
},
},
{
id: 4,
label: 'Array',
value: ['test'],
},
],
});
2018-11-24 18:48:03 +01:00
new Choices('#choices-within-form');
2018-11-25 13:48:49 +01:00
new Choices('#choices-set-choice-by-value').setChoiceByValue('Choice 2');
2019-01-19 15:47:22 +01:00
new Choices('#choices-search-by-label', { searchFields: ['label'] });
2018-10-14 17:00:46 +02:00
});
< / script >
< / body >
< / html >