28:null 29:["$","title",null,{"children":"Hello, Choices! | Ben Ayre | Observable"}] 2e:T217f,// https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css with a couple of tweaks html``2f:[] 2c:{"id":"fb5d7cd493282809","slug":"hello-choices","title":"Hello, Choices!","thumbnail":"2d81723023bffec955d44807d41bd976ffe2b2674356d373f21e0e22be22d32f","access_level":"public","create_time":"$D2020-02-29T17:42:44.743Z","update_time":"$D2020-09-01T10:35:15.069Z","view_time":null,"first_public_time":"$D2020-03-12T17:20:18.214Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"1a4aa47cd703517e","login":"bayre","name":"Ben Ayre","avatar_url":"https://avatars-next.observableusercontent.com/2da36ab607422e26532c254fbf46184b10db517e832d2f1e4b775481d4b1333c","tier":"starter_2024"},"version":925,"publish_version":925,"role":null,"authored":false,"authors":[{"type":"individual","id":"b9928320d6e1a511","login":"bayre","name":"Ben Ayre","avatar_url":"https://avatars-next.observableusercontent.com/2da36ab607422e26532c254fbf46184b10db517e832d2f1e4b775481d4b1333c","tier":null}],"members":[{"type":"individual","id":"b9928320d6e1a511","login":"bayre","name":"Ben Ayre","avatar_url":"https://avatars-next.observableusercontent.com/2da36ab607422e26532c254fbf46184b10db517e832d2f1e4b775481d4b1333c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":12,"collection":null,"type":"notebook","body":{"title":"Hello, Choices!","cells":[{"id":0,"value":"md`# Hello, Choices!\n\nA quick demo of [Choices.js](https://github.com/jshjohnson/Choices)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"viewof selection = {\n // create a multi select element and add it to the DOM\n const select = html``\n document.body.appendChild(select)\n // initialise choices\n new Choices(select, {\n removeItemButton: true,\n choices: options\n })\n // set event listeners (adapted from https://observablehq.com/@mbostock/form-input)\n const container = html`

${select.closest(\".choices\")}

`\n container.addEventListener(\"change\", () => container.dispatchEvent(new CustomEvent(\"input\")));\n container.addEventListener(\"input\", () => container.value = Array.from(select, d => d.value));\n container.value = [];\n return container\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":771,"value":"selection","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"options = [\n { value: \"One\", label: \"Label one\" },\n { value: \"Two\", label: \"Label two\" },\n { value: \"Three\", label: \"Label three\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"Choices = require(\"choices.js@9.0.1/public/assets/scripts/choices.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"