durfdoen-2.0/content/search.html.erb

<div class="search">
    <div class="search__main">
        <form id="search_form">
            <label>Wat zoek je?</label><input class="search__input" type="text">
            <button type="submit">Zoek!</button>
        </form>
    </div>
    <div id="search_wrapper" class="fancy_link_container"></div>
</div>
<script src="https://unpkg.com/lunr/lunr.js"></script>

<script>
function clearDiv(element) {
    while (element.lastElementChild) {
        element.removeChild(element.lastElementChild);
    }
}

function myFunction(event) {
    doSearch(event.target[0].value);
    event.preventDefault();
}

const wrapper = document.getElementById("search_wrapper");
const form = document.getElementById('search_form');
form.addEventListener('submit', myFunction);

var doSearch = (e) => {};

function parseUrlParams () {
    const url = window.location.search;
    if(!url) return {};
    const paramsBuilder = {};
    for(let currentVar of url.substring(1).split("&")) {
      var pair = currentVar.split('=');
      paramsBuilder[pair[0]] = decodeURIComponent(pair[1]);
    }

    return paramsBuilder;
};

function resetFromUrl() {
    const urlParams = parseUrlParams();

    if(urlParams["q"]) {
        doSearch(urlParams["q"]);
        form[0].value = urlParams["q"];
    } else {
        form[0].value = "";
        clearDiv(wrapper);
    }
}

function ready() {
    Array.prototype.stableSort = function(cmp) {
        cmp = !!cmp ? cmp : (a, b) => {
            if (a < b) return -1;
            if (a > b) return 1;
            return 0;
        };
        let stabilizedThis = this.map((el, index) => [el, index]);
        let stableCmp = (a, b) => {
        let order = cmp(a[0], b[0]);
        if (order != 0) return order;
            return a[1] - b[1];
        }
        stabilizedThis.sort(stableCmp);
        for (let i=0; i<this.length; i++) {
            this[i] = stabilizedThis[i][0];
        }
        return this;
    }

    Array.prototype.sortByKey = function(key) {
        return this.sort(function(a, b) {
            var x = key(a); var y = key(b);
            return ((x < y) ? -1 : ((x > y) ? 1 : 0));
        });
    }

    function render_results(div, partials) {
        const create_wrapper= document.createElement('div');
        for(let partial of partials) {
            create_wrapper.innerHTML = partial;
            div.appendChild(create_wrapper.firstChild);
        }
    }

    const documents = <%=  CreateFullTextIndex.new(@items.find_all("**/verenigingen/*") + @items.find_all("**/konventen/*")).call.to_json %>;
    const partials = <%= to_partials_search(all_groups()) %>;

    const index = lunr(function () {
        this.field('id', {boost: 15});
        this.field('title', {boost: 10});
        this.field('verkort', {boost: 8});
        this.field('konvent', {boost: 3});
        this.field('body');
        this.ref('url');

        documents.forEach(function(i) { this.add(i); }, this);
    });

    doSearch = (query) => {
        clearDiv(wrapper);
        render_results(wrapper, index.search(query).sortByKey(i => partials[i.ref].titel).stableSort((a, b) => b.score - a.score).map(i => partials[i.ref].html));

        window.history.pushState("search state", "", window.location.pathname + "?q="+query);
    };

    resetFromUrl();
}

document.addEventListener("DOMContentLoaded", ready);
window.addEventListener("popstate", resetFromUrl);

</script>