28:null 29:["$","title",null,{"children":"Supply chain filter | Ben Ayre | Observable"}] 2e:T76e,viewof supplyChainFilters = { // create form const form = html`` // add to DOM document.body.appendChild(form) // initialise choices Object.keys(options).forEach((k, i, g) => { const select = form.querySelector(`#${k}`); select.parentNode.style.zIndex = g.length - i; new Choices(select, {removeItemButton: true, choices: options[k]}) }) // https://observablehq.com/@mbostock/form-input const container = html`

${form}${swoop}

` form.addEventListener("submit", event => event.preventDefault()); form.addEventListener("change", () => container.dispatchEvent(new CustomEvent("input"))); container.addEventListener("input", () => container.value = getValues(form)); container.value = getValues(form); return container }2f:T209e,style = html``30:[{"id":"7fb43116afd7e411ee1b4d3cd422441bf1a9c09aef4fb1d1641d724174eccb743448df9d8afd8d10f119b1e4a480194d93bc4b412def0aa45b7d3d42d6578a29","href":"https://static.observableusercontent.com/files/7fb43116afd7e411ee1b4d3cd422441bf1a9c09aef4fb1d1641d724174eccb743448df9d8afd8d10f119b1e4a480194d93bc4b412def0aa45b7d3d42d6578a29","name":"options@5.json","type":"application/json","lastModified":1583246657068.624,"size":41323}] 2c:{"id":"82ace5a286d58119","slug":"supply-chain-filter","title":"Supply chain filter","thumbnail":"af6e36abc673e5ae9f55862306e17a0c95dcb870386a899115f2a21dd5f3dc87","access_level":"public","create_time":"$D2020-03-02T11:50:47.887Z","update_time":"$D2020-09-01T09:16:44.328Z","view_time":null,"first_public_time":"$D2020-03-12T17:20:24.116Z","has_unpublished_edits":null,"fork":{"id":"fb5d7cd493282809","slug":"hello-choices","title":"Hello, Choices!","owner":{"id":"1a4aa47cd703517e","login":"bayre","name":"Ben Ayre"}},"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":1176,"publish_version":1176,"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":7,"collection":null,"type":"notebook","body":{"title":"Supply chain filter","cells":[{"id":0,"value":"md`# Supply chain filter\n\nCombining [Choices.js](https://github.com/jshjohnson/Choices) and [views](https://observablehq.com/@observablehq/introduction-to-views) for a custom filter component.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":987,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"supplyChainFilters","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"options = FileAttachment(\"options@5.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":864,"value":"// https://observablehq.com/@mbostock/form-input\ngetValues = form => new Map(Array.from(\n form.querySelectorAll(\"select\"), \n d => [d.id, Array.from(d).map(d => d.value).filter(d => d.length > 0)]\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"swoop = ``","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"