viewof mas = multiAutoSelect({
options: states,
placeholder: "Select some US states . . ."
})
mas
states = usa.objects.states.geometries.map(d => d.properties.name)
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`<span style="margin-right: 5px; border: solid 1px #ccc; border-radius: 10px;padding: 2px 5px;">${d} <button style="margin:0px; padding:0px;">✖️</button></span>`;
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>
<input name="input" type="text" autocomplete="off"
placeholder="${placeholder ||
""}" style="font-size: 1em;" list=${list}>
<datalist id="${list}">
${options.map(d =>
Object.assign(html`<option>`, {
value: d
})
)}
</datalist>
<br/>
</form>
`
});
form.output.style["margin-left"] = "0px";
return form;
}
import { input, usa } from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
