DataListInput = (options, { label = "Select an option", value = "" } = {}) => {
const input = htl.html`
<input list="options" placeholder="${label}">
`;
const datalist = htl.html`
<datalist id="options">
${options.map(option => htl.html`<option value="${option}">`)}
</datalist>
`;
const node = htl.html`
<div>
${input}
${datalist}
</div>
`;
Object.defineProperty(node, "value", {
get() {
return value;
},
set(v) {
value = v;
input.value = v;
}
});
input.oninput = (e) => set(node, e.target.value);
node.value = value;
return node;
}