mlu @aws
function set(input, value) {
input.value = value;
input.dispatchEvent(new Event("input", { bubbles: true })); // Native events bubble, so we should too
}
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>
`;
// Update the display whenever the value changes
Object.defineProperty(node, "value", {
get() {
return value;
},
set(v) {
value = v;
input.value = v;
}
});
// Handle input changes
input.oninput = (e) => set(node, e.target.value);
// Set the initial value
node.value = value;
return node;
}
viewof gpuOptionsInput = DataListInput(gpuOptions, {label: "Select GPU", value: gpuOptions[0]});
gpuOptionsInput
Inputs.bind(Inputs.radio(gpuOptions, {label: "GPU"}), viewof gpuOptionsInput)
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.
