pocket_archive/templates/assets/js/search.js

/*
 * Query handling.
 */
const params = new Proxy(new URLSearchParams(window.location.search), {
  get: (searchParams, prop) => searchParams.get(prop),
});
const qstring = params.q;

if (qstring != undefined) {
    (async () => {
        // Re-fill query string in form field.
        const search_field = document.getElementById("qry_f");
        search_field.value = qstring;

        const fuse = await fuse_init();

        const results = fuse.search(qstring);
        console.log(results);
        const res_el = document.getElementById('result_list');

        results.forEach(sres => {
            const rsrc = sres.item;

            const res_tn = document.createElement("img");
            res_tn.setAttribute("src", window.webroot + rsrc.tn);
            res_tn.setAttribute("alt", rsrc.label);
            res_tn.classList.add("result_tn");
            res_tn.classList.add("float-left");

            const res_icon = document.createElement("img");
            res_icon.setAttribute("src", rsrc.icon);
            res_icon.setAttribute("alt", rsrc.content_type);
            res_icon.classList.add("body_icon");

            const res_title_txt = document.createTextNode(rsrc.label || rsrc.fname);

            const res_link = document.createElement("a");
            res_link.setAttribute("href", window.webroot + rsrc.href);
            res_link.appendChild(res_icon);
            res_link.appendChild(res_title_txt);

            const res_title = document.createElement("h4");
            res_title.appendChild(res_link);

            const res_id_txt = document.createTextNode("ID: " + rsrc.id);
            res_id = document.createElement("p");
            res_id.appendChild(res_id_txt);

            const res_date_txt = document.createTextNode("Submitted: " + rsrc.submitted);
            res_date = document.createElement("p");
            res_date.appendChild(res_date_txt);

            const res_box = document.createElement("div");
            res_box.classList.add("column");
            res_box.classList.add("search_item");
            res_box.appendChild(res_title);
            res_box.appendChild(res_id);
            res_box.appendChild(res_date);

            const res_li = document.createElement("li");
            res_li.setAttribute("id", "sres-" + rsrc.id);
            res_li.classList.add("row");
            res_li.classList.add("clearfix");
            res_li.appendChild(res_tn);
            res_li.appendChild(res_box);

            res_el.appendChild(res_li);
        });

        // Reveal section after populating.
        const res_sec = document.getElementById('search_results');
        res_sec.classList.remove("hidden");
    })();
}