wagtail/docs/_templates/search.html

{% extends "layout.html" %}
{% set title = _('Search') %}

{% block body %}
    <noscript>
        <div id="fallback" class="admonition warning">
            <p class="last">
                {% trans trimmed %}Please activate JavaScript to enable the search
                    functionality.{% endtrans %}
            </p>
        </div>
    </noscript>

    <div id="search-results">
    </div>

    <nav id="pagination" class="pagination" aria-label="pagination" hidden="true" >
        <button class="pagination-previous" id="pagination-previous">
            ← Previous
        </button>
        <ul class="pagination-list"></ul>
        <button class="pagination-next" id="pagination-next">
            Next →
        </button>
    </nav>
{% endblock %}

{% block footer %}
    {{ super() }}
    <script>

        function runSearchPageSearch(page) {
            const urlParams = new URLSearchParams(window.location.search)
            const query = urlParams.get('q')

            const searchResultsContainer = document.getElementById('search-results')

            // Erase previous results
            searchResultsContainer.innerHTML = ""
            document.querySelector('.pagination-list').innerHTML = ""
            addHeadingForQuery(query, searchResultsContainer)

            const docSearch = docSearchReady()
            const index = docSearch.client.initIndex('wagtail')
            index.search(
                query,
                {
                    hitsPerPage: 100,
                    page: page,
                    facetFilters: [getVersionFacetFilter()]
                }
            )
                .then(result => {
                // Display pagination if more than 1 page returned
                    let nbPages = result["nbPages"]
                    if (nbPages > 1) {
                        document.querySelector("#pagination").hidden = false;
                        displayPagination(page, nbPages)
                    }

                // Display hits
                    let hits = result["hits"]
                    addResultsList(hits, query, searchResultsContainer)
                })
                .catch((error) => console.log(error))
        }

        function displayPagination(page, totalPages) {
            const pagination = document.querySelector("#pagination")
            const paginationList = pagination.querySelector(".pagination-list")

            // Hide previous/next button if showing first/last page
            pagination.querySelector(".pagination-previous").hidden = false;
            pagination.querySelector(".pagination-previous").hidden = page === 0;
            pagination.querySelector(".pagination-next").hidden = page === totalPages -1;

            // Display at most "toBeDisplayed" page links in the paginator
            const toBeDisplayed = 7
            let [start, end] = setStartEndForPaginator(page, totalPages, toBeDisplayed)

            for (let i = start; i < end; i++) {
                let newPaginationItem = document.createElement("li")
                let newPaginationbutton = document.createElement("button")
                newPaginationbutton.classList.add("pagination-button")
                newPaginationbutton.innerHTML = i + 1
                if (i == page) {
                    newPaginationbutton.setAttribute("aria-label", `page ${i+1}`)
                    newPaginationbutton.setAttribute("aria-current", "page")
                } else {
                    newPaginationbutton.setAttribute("aria-label", `Go to page ${i+1}`)
                }

                // Register event handlers
                newPaginationbutton.onclick = function() {
                    runSearchPageSearch(i)
                };
                pagination.querySelector(".pagination-previous").onclick = function() {
                    runSearchPageSearch(page - 1)
                };
                pagination.querySelector(".pagination-next").onclick = function() {
                    runSearchPageSearch(page + 1)
                };

                newPaginationItem.append(newPaginationbutton)
                paginationList.append(newPaginationItem)
            }
        }

        function setStartEndForPaginator(currentPage, totalPages, nbPagesLinkToDisplay) {
            let start = 0
            let end = totalPages

            if (totalPages > nbPagesLinkToDisplay) {
                start = currentPage

                if (totalPages - currentPage < nbPagesLinkToDisplay) {
                    start = totalPages - nbPagesLinkToDisplay
                }

                if (totalPages - start > nbPagesLinkToDisplay) {
                    end = currentPage + nbPagesLinkToDisplay
                }
            }

            return [start, end]
        }

        function addHeadingForQuery(query, parentElement) {
            const searchHeading = document.createElement('h1')
            searchHeading.textContent = `Search results for “${query}”`
            parentElement.appendChild(searchHeading)
        }

        function addResultsList(hits, query, parentElement) {
            const searchResultsList = document.createElement('ul')
            searchResultsList.className = "search"
            for (hit of hits) {
                const hitElement = createHitElement(hit, query)
                searchResultsList.appendChild(hitElement)
            }
            parentElement.appendChild(searchResultsList)
        }

        function createHitElement(hitData, query) {
            const pageURL = new URL(hitData.url)
            pageURL.hash = '';
            pageURL.searchParams.set('highlight', query);
            const anchorURL = new URL(hitData.url);
            anchorURL.searchParams.set('highlight', query);
            const result = hitData._highlightResult

            const hitListElement = document.createElement('li')

            const hierarchies = Object.values(result.hierarchy);
            const firstHierarchyLevel = hierarchies[0];
            const lastHierarchyLevel = hierarchies[hierarchies.length - 1];

            const pageLink = document.createElement('a')
            hitListElement.appendChild(pageLink)
            pageLink.innerHTML = firstHierarchyLevel.value
            pageLink.href = pageURL

            const contextElement = document.createElement('div')
            hitListElement.appendChild(contextElement)
            contextElement.className = 'context'

            if (lastHierarchyLevel && lastHierarchyLevel !== firstHierarchyLevel ) {
                const contextLinkContainer = document.createElement('div')
                contextElement.appendChild(contextLinkContainer)
                const contextLink = document.createElement('a')
                contextLinkContainer.appendChild(contextLink)
                contextLink.innerHTML = lastHierarchyLevel.value
                contextLink.href = anchorURL
            }

            if (result.content) {
                const contentElement = document.createElement('div')
                contentElement.innerHTML = result.content.value
                contextElement.appendChild(contentElement)
            }

            return hitListElement
        }

        window.addEventListener('DOMContentLoaded', () => runSearchPageSearch(0));
    </script>
{% endblock %}