2e:null 2f:["$","title",null,{"children":"Multi Auto Select | Vy | Observable"}] 34:T84a,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 = ""; fm.value = 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; }35:[] 32:{"id":"bd6eba890ddb0174","slug":"multi-auto-select","title":"Multi Auto Select","thumbnail":"63b4922b7b9e491580543422c818bdebd2d891716a9954992c9cd5826e0ba3d5","access_level":"public","create_time":"$D2022-04-27T17:52:18.599Z","update_time":"$D2022-04-27T19:32:06.141Z","view_time":null,"first_public_time":"$D2022-04-27T17:52:29.664Z","has_unpublished_edits":null,"fork":{"id":"9ac406907b45efa2","slug":"multi-auto-select","title":"Multi Auto Select","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":1,"starred":false,"owner":{"type":"team","id":"70a28fc0926865c6","login":"incakoala","name":"Vy","avatar_url":"https://avatars-next.observableusercontent.com/5d008ae093fa8b024defa3485b161456bc6ba621b7c21ef65061c11f7ca7dd98","tier":"starter_2024"},"version":47,"publish_version":47,"role":null,"authored":false,"authors":[{"type":"individual","id":"ded1682d7fdbac61","login":"incakoala","name":"Vy","avatar_url":"https://avatars-next.observableusercontent.com/5d008ae093fa8b024defa3485b161456bc6ba621b7c21ef65061c11f7ca7dd98","tier":null}],"members":[{"type":"individual","id":"ded1682d7fdbac61","login":"incakoala","name":"Vy","avatar_url":"https://avatars-next.observableusercontent.com/5d008ae093fa8b024defa3485b161456bc6ba621b7c21ef65061c11f7ca7dd98","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"viewof mas = multiAutoSelect({\n options: states,\n placeholder: \"Select some US states . . .\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"mas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"states = usa.objects.states.geometries.map(d => d.properties.name)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { input, usa } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"