paige-hugo/layouts/partials/paige/search.html

{{ $page := . }}

<div>
    <div class="container-fluid">
        <form action="{{ .Page.RelPermalink }}" dir="auto" method="get">
            <div class="justify-content-center mb-3 row">
                <div class="col col-sm-8 col-md-7 col-lg-6 col-xl-5 col-xxl-4">
                    <input class="form-control" id="query" name="q" placeholder="{{ i18n `paige_search_input` }}" type="search">
                </div>
            </div>
            <div class="justify-content-center mb-3 row">
                <div class="col col-auto">
                    <button class="btn btn-primary" type="submit">{{ i18n "paige_search_button" }}</button>
                </div>
            </div>
        </form>
    </div>
    <div id="paige-error" style="display: none">
        <p class="text-center">
            <i class="bi bi-exclamation-triangle display-6 text-danger">
                <span class="visually-hidden">{{ i18n "paige_search_error" }}</span>
            </i>
        </p>
    </div>
    <div id="paige-nothing" style="display: none">
        <p class="text-center">
            <i class="bi bi-x-circle display-6 text-danger">
                <span class="visually-hidden">{{ i18n "paige_search_nothing" }}</span>
            </i>
        </p>
    </div>
    <div id="paige-searching" style="display: none">
        <div class="mb-3 text-center">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">{{ i18n "paige_search_searching" }}</span>
            </div>
        </div>
    </div>
    <div id="paige-something" style="display: none">
        <p class="text-center">
            <i class="bi bi-check-circle display-6 text-success">
                <span class="visually-hidden">{{ i18n "paige_search_something" }}</span>
            </i>
        </p>
    </div>
</div>
<div id="paige-results" style="display: none"></div>
<script crossorigin="anonymous" defer integrity="sha384-1LalyFI+BycKouEClZE5CoFnlLr+Kx8Wslc45o5NATVo+c2mEh02i8HNaaT7XOdQ" referrerpolicy="no-referrer" src="https://cdn.jsdelivr.net/gh/nextapps-de/flexsearch@0.7.31/dist/flexsearch.bundle.js"></script>
<script>
var paigeErrorElement = document.getElementById("paige-error");
var paigeNothingElement = document.getElementById("paige-nothing");
var paigeQueryElement = document.getElementById("query");
var paigeSearchingElement = document.getElementById("paige-searching")
var paigeSomethingElement = document.getElementById("paige-something");
var paigeResultsElement = document.getElementById("paige-results");

if (paigeQueryElement !== null) {
    var queryText = decodeURIComponent((location.search.split("q=")[1] || "").split("&")[0]).replace(/\+/g, " ");
    if (queryText) {
        paigeQueryElement.value = queryText;
        paigeSearch(queryText);
    }
}

function paigeSearch(queryText) {
    paigeShow(paigeSearchingElement);
    fetch("{{ relLangURL `paige-search.json` | safeJS }}").then(function (response) {
        if (response.status !== 200) {
            console.log("Cannot load {{ relLangURL `paige-search.json` | safeJS }}", response);
            paigeHide(paigeSearchingElement);
            paigeShow(paigeErrorElement);
            return;
        }
        response.json().then(function (pages) {
            var index = new FlexSearch.Document({
                document: {
                    id: "link",
                    index: ["categories", "description", "keywords", "tags", "text", "title"]
                }
            });
            var pathPage = {};
            pages.forEach(function (page) {
                index.add(page);
                pathPage[page.link] = page;
            });
            var results = index.search(queryText, {limit: 50});
            paigeHide(paigeSearchingElement);
            var shown = false;
            var done = {};
            results.forEach(function (result) {
                result.result.forEach(function (path) {
                    if (path === "{{ $page.RelPermalink }}" || done[path]) {
                        return;
                    }
                    if (!shown) {
                        shown = true;
                        paigeShow(paigeSomethingElement);
                        paigeShow(paigeResultsElement);
                    }
                    done[path] = true;
                    var page = pathPage[path];
                    var link = document.createElement("a");
                    link.href = page.link;
                    link.innerText = page.title;
                    var result = document.createElement("p");
                    result.classList = "text-center";
                    result.appendChild(link);
                    if (page.description) {
                        result.appendChild(document.createElement("br"));
                        result.innerHTML += page.description;
                    }
                    paigeResultsElement.appendChild(result);
                });
            });
            if (!shown) {
                paigeShow(paigeNothingElement);
            }
        }).catch(function (error) {
            console.log("Cannot search /paige-search.json", error);
        });
    });
}

function paigeHide(element) {
    element.style.display = "none";
}

function paigeShow(element) {
    element.style.display = "block";
}
</script>