Static Full Text Search

<!-- loading MiniSearch from its minified single-file-script -->
<!-- of course I vendored the file -->
<script src="/js/minisearch.min.js"></script>

<!-- it's just an input field -->
<!-- you may ignore these styles, I just added them here because my CSS does not include styling for inputs -->
<input
         id="searchfield"
         type="text"
         placeholder="Search..."
         style='width:100%;padding:0.4em;font-size:21px;font-family:et-book,Palatino,"Palatino Linotype","Palatino LT STD","Book Antiqua",Georgia,serif;'>

<!-- preparing some elements for display
     since I am not using any template libraries, I have to do this manually. It is not so bad,
     because the content is small enough to model with regular fields with `id`s -->
<div id="results" style="display: none;">
    <h2 id="result_header"></h2>
    <ul id="result_list">
    </ul>
</div>

// two convenience functions; not strictly necessary, but make the structure below a bit nicer
function show(element) {
    element.style.display = 'block';
};
function hide(element) {
    element.style.display = 'none';
}

// once we have finished searching, we need to show the results, this function isolates that
// could be inlined, but meh!
function renderResult(result, searchPhrase) {
    let rendered = "";
    for (const item of result) {
        rendered += `<li><a href="${item.url}">${item.title}</a></li>`
    }

    result_header.innerHTML = `Results for “${searchPhrase}”`;
    result_list.innerHTML = rendered;
    show(results);
};

// these are the search options; I arrived at those through rigorous scientific experiments!!!
const miniSearch = new MiniSearch({
    fields: ['title', 'content'],
    storeFields: ['title', 'url'],
    searchOptions: {
        boost: { title: 2 },
        prefix: true,
        fuzzy: 0.3,
    },
})

// this is where the actual magic happens: first we get the search index, extract its JSON and finally...
fetch('/search_index.json')
    .then((response) => response.json())
    .then(data => {

        // once we have the data, we build the search index (this only happens once at the beginning)
        miniSearch.addAll(data);

        // this is called from the timer every time we do an actual search
        // note me cleverly putting the function in this closure!
        function search() {
            const results = miniSearch.search(searchfield.value);
            renderResult(results, searchfield.value);
        };

        // here's the only little bit of extravagance I made for myself: the timer
        // the idea is that on every input event, we re-start a timer; only when
        // the timer expires do we actually do the search. This makes the site
        // not lock up while the user is still typing.
        // Turns out, the actual search is fast enough, so I set the delay to 0; this
        // at least takes the search out of the event loop.
        let timer;
        searchfield.oninput = function () {
            clearTimeout(timer);
            if (!searchfield.value) {
                hide(results);
                return;
            }
            timer = setTimeout(search, 0);
        };
    });