31:T8e6,function multiAutoSelect(config = {}) { const { value, title, description, disabled, autocomplete = "off", placeholder, size, options, list = "options" } = Array.isArray(config) ? { options: config } : config; const optionsSet = new Set(options); const form = input({ type: "text", title, description, attributes: { disabled }, action: fm => { const addSelectedOption = d => { const ele = html`${d} `; ele.querySelector("button").addEventListener("click", b => { console.log("delete", d); fm.value.splice(fm.value.indexOf(d), 1); renderSelection(); fm.dispatchEvent(new CustomEvent("input")); fm.input.focus(); }); return ele; }; function renderSelection() { fm.output.innerHTML = ""; for (let o of fm.value) { fm.output.appendChild(addSelectedOption(o)); } } fm.input.value = ""; // Update here to handle array values correctly fm.value = Array.isArray(value) ? value.slice() : (value ? [value] : []); fm.onsubmit = e => e.preventDefault(); fm.input.oninput = function(e) { e.stopPropagation(); if ( optionsSet.has(fm.input.value) && fm.value.indexOf(fm.input.value) === -1 ) { fm.value.push(fm.input.value); renderSelection(); fm.input.value = ""; fm.dispatchEvent(new CustomEvent("input")); } }; renderSelection(); }, form: html` ` }); form.output.style["margin-left"] = "0px"; return form; } 32:[] 2f:{"title":"Multi Auto Select","cells":[{"id":0,"value":"md`# Multi Auto Select\n\nA selector of multiple items with an autocomplete search box. Based on [@jahkenas/inputs](/@jashkenas/inputs), also submitted as a suggestion there\n\n~~~js\nimport {multiAutoSelect} from \"@john-guerra/multi-auto-select\"\n~~~\nExample:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"states","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"viewof mas2 = multiAutoSelect({\n options: states,\n placeholder: \"Select some US states . . .\",\n value: [\"Alabama\", \"California\"]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"viewof mas = multiAutoSelect({\n options: states,\n placeholder: \"Select some US states . . .\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof mas3 = multiAutoSelect({\n options: states,\n placeholder: \"Select some US states . . .\",\n value: \"Alabama\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"states = usa.objects.states.geometries.map(d => d.properties.name)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import { input, usa } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}