search.html

<link rel="prefetch" href="index.js" />

<form>
    <input class="search" placeholder="What are you looking for?" name="search_query" id="search_query" /><br />
    <button class="search" type="submit">Find it</button>
</form>

<h1 id="search_header">Results of your query:</h1>

<table id="search_results_table">
    <tbody id="search_results_tbody">
        <tr id="search_results_placeholder" style="display: none">
            <td id="search_results_placeholder_td"><h3>Please wait, search is in progress...</h3></td>
        </tr>
    </tbody>
</table>

<script src="{{ "assets/js/lunr.min.js" | relative_url }}" integrity="sha256-34Si1Y6llMBKM3G0jQILVeoQKEwuxjbk4zGWXXMT4ps=" crossorigin="anonymous"></script>

<script>
    var el_table_body = document.getElementById('search_results_tbody');
    var el_input_query = document.getElementById('search_query');
    var el_tr_placeholder = document.getElementById('search_results_placeholder');
    var el_header = document.getElementById('search_header');

    var url_params = new URLSearchParams(window.location.search);
    var search_term = url_params.get('search_query') || "";

    if (!!search_term.length) {
        el_input_query.value = search_term;
        el_header.style.display = "block";

        el_tr_placeholder.style.display = "block";
    }

    var construct_cell = function(title, content, link) {
        if (link == '#') {
            return '<td><h3 class="result">' + title + '</h3><p>' + content + '</p></td>';
        } else {
            return '<td><h3><a href="' + link + '">' + title + '</a></h3><p>' + content + '</p></td>';
        }
    }

    var capitalize = function(text) {
        return text.charAt(0).toUpperCase() + text.slice(1);
    }

    var prettify = function(text) {
        return text.split(':').map(capitalize).join(' &raquo; ');
    }

    {% assign the_cards = site.pages | where_exp:"card","card.searchable >= 1.0" %}

    window.content = { {% for card in the_cards %}
        "{{ card.url | slugify }}": {
            "title": "{{ card.shortcut | xml_escape }}",
            "content": {{ card.content | strip_html | strip_newlines | jsonify }},
            "url": "{{ card.url | xml_escape | relative_url }}"
        } {% unless forloop.last %},{% endunless %} {% endfor %}
    };

    fetch('{{ "index.js" | relative_url }}').then(response => response.text()).then((data) => {
        var the_index = JSON.parse(data);
        window.search_index = lunr.Index.load(the_index);

        if (search_term != "") {
            var results = window.search_index.search(search_term);
            for (var i = 0; i < results.length; i++) {
                var node = document.createElement("tr");
                node.innerHTML = construct_cell(prettify(window.content[results[i].ref].title),
                                                window.content[results[i].ref].content.substring(0, 125) + '...',
                                                window.content[results[i].ref].url);
                el_table_body.appendChild(node);
            }
            if (results.length == 0) {
                var node = document.createElement("tr");
                node.innerHTML = construct_cell("No results",
                                                'Sorry, we were unable to find anything that matches your query',
                                                "#");
                el_table_body.appendChild(node);
            }
        }

        el_tr_placeholder.style.display = "none";
    })

</script>