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; }