function SearchForm({
uid = DOM.uid("autosuggestion").id,
placeholder = "",
description = "",
format = (d) => d,
suggestion = () => []
} = {}) {
const input = htl.html`<input
type="text"
placeholder="${placeholder}"
list="${uid}"
autocomplete="off"
>`;
const tag = htl.html`<div style="font-size: 0.85rem; font-style: italic; margin-top: 3px;">${description}</div>`;
const datalist = htl.html`<datalist id="${uid}">`;
const form = htl.html`<div>${tag}${input}${datalist}`;
let results = [];
form.value = "";
form.onsubmit = (event) => {
console.log("submit")
event.preventDefault();
}
form.onchange = (event) => {
console.log("change")
const value = event.target.value;
if(nodes_hash.has(value)){
form.value = results.find((d) => format(d) == value) || "";
input.blur();
form.dispatchEvent(new Event("input", {bubbles: true}));
}else{
console.log("catched")
}
};
const options = new Map();
const getOption = async (text) =>
options.get(text) ||
(text ? options.set(text, await suggestion(text)) : options.set(text, []),
options.get(text));
input.oninput = async (event) => {
let value = event.target.value;
results = await getOption(value);
d3.select(`#${uid}`)
.selectAll("option")
.data(results)
.join("option")
.attr("value", format);
console.log("classsel")
if(results.length==0 & value.length>0){
d3.select(input).style("color","#ff0000").attr("class","instance-notfound")
d3.select(tag).style("color","#ff0000").text("Instance not found")
}else{
d3.select(input).style("color","#000000").attr("class","instance-ok")
d3.select(tag).style("color","#000000").text("Searching an instance")
}
};
return form;
}