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 -->
< link rel = "stylesheet" href = "../assets/styles/base.min.css?version=3.0.2" >
<!-- End ignore these -->
<!-- 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 -->
< / 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-10-18 23:18:17 +02:00
< select class = "form-control" name = "choices-basic" id = "choices-basic" >
2018-10-17 23:36:37 +02:00
< option value = "Dropdown item 1" > Dropdown item 1< / option >
< option value = "Dropdown item 2" > Dropdown item 2< / option >
< option value = "Find me" > Dropdown item 3< / option >
< option value = "Dropdown item 4" > Dropdown item 4< / option >
< / 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-14 17:00:46 +02:00
< option value = "Dropdown item 1" > Dropdown item 1< / option >
< option value = "Dropdown item 2" > Dropdown item 2< / option >
< option value = "Dropdown item 3" > Dropdown item 3< / option >
< option value = "Dropdown item 4" > Dropdown item 4< / option >
< / 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-14 17:00:46 +02:00
< option value = "Dropdown item 1" > Dropdown item 1< / option >
< option value = "Dropdown item 2" > Dropdown item 2< / option >
< option value = "Dropdown item 3" > Dropdown item 3< / option >
< option value = "Dropdown item 4" disabled > Dropdown item 4< / option >
< / 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" >
< option value = "Dropdown item 1" selected > Dropdown item 1< / option >
< option value = "Dropdown item 2" > Dropdown item 2< / option >
< option value = "Dropdown item 3" > Dropdown item 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-14 17:00:46 +02:00
< option value = "Dropdown item 1" > Dropdown item 1< / option >
< option value = "Dropdown item 2" > Dropdown item 2< / option >
< option value = "Dropdown item 3" > Dropdown item 3< / option >
< / 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-17 23:36:37 +02:00
< option value = "Dropdown item 1" > Dropdown item 1< / option >
< option value = "Dropdown item 2" > Dropdown item 2< / option >
< option value = "Dropdown item 3" > Dropdown item 3< / option >
< / 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-18 00:13:24 +02:00
< option value = "Dropdown item 1" > Dropdown item 1< / option >
< option value = "Dropdown item 2" > Dropdown item 2< / option >
< option value = "Dropdown item 3" > Dropdown item 3< / option >
< / 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-18 00:13:24 +02:00
< option value = "Dropdown item 1" > Dropdown item 1< / option >
< option value = "Dropdown item 2" > Dropdown item 2< / option >
< option value = "Dropdown item 3" > Dropdown item 3< / option >
< / 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-14 17:00:46 +02:00
< / div >
< / div >
< script >
document.addEventListener('DOMContentLoaded', function() {
2018-10-17 23:36:37 +02:00
new Choices('#choices-basic');
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-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', {
searchFloor: 10,
});
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-14 17:00:46 +02:00
});
< / script >
< / body >
< / html >