function mkDiv (res) {
    let div = document.createElement("div");
    let a = document.createElement("a");
    a.innerText = res.doc.title;
    a.href = res.ref;
    let text = document.createElement("span");
    text.innerText = res.doc.body.slice(0,400).replaceAll("\n", " ");
    text.classList.add("searchresultprevtext");

    div.appendChild(text);
    div.appendChild(a);
    return div;
}

window.onload = () => {
    console.log("hello!")
    let searchbox = document.getElementById("searchbox");
    searchbox.innerHTML =
        "<input id='searchinput' placeholder='search ...'></input> \
         <div id='searchresults' style='display:none'></div>";

    let searchinput = document.getElementById("searchinput");
    let searchresults = document.getElementById("searchresults");

    let index = elasticlunr.Index.load(window.searchIndex);

    searchinput.addEventListener("keyup", () => {
        let term = searchinput.value.trim();
        let results = [];
        if (term !== "") {
            results = index.search(term, {});
            console.log(results);

            while (searchresults.lastChild) {
                searchresults.removeChild(searchresults.lastChild)
            }
            if (results.length !== 0) {
                let resultdivs = results.map(mkDiv);
                resultdivs.map((div) => searchresults.appendChild(div));
            } else {
                searchresults.innerHTML =
                    term.length <= 4 ?
                    "<div>Need at least four characters to search.</div>"
                    : "<div>No results here.</div>";
            }
            searchresults.style.display = "initial";
        } else {
            searchresults.style.display = "none";
        }
    });
}