30: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 }31:T209e,style = html``32:[{"id":"7fb43116afd7e411ee1b4d3cd422441bf1a9c09aef4fb1d1641d724174eccb743448df9d8afd8d10f119b1e4a480194d93bc4b412def0aa45b7d3d42d6578a29","href":"https://static.observableusercontent.com/files/7fb43116afd7e411ee1b4d3cd422441bf1a9c09aef4fb1d1641d724174eccb743448df9d8afd8d10f119b1e4a480194d93bc4b412def0aa45b7d3d42d6578a29","name":"options@5.json","type":"application/json","lastModified":1583246657068.624,"size":41323}] 2e:{"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"},{"id":987,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":691,"value":"supplyChainFilters","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"options = FileAttachment(\"options@5.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":641,"value":"swoop = ``","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"Choices = require(\"choices.js@9.0.1/public/assets/scripts/choices.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}