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>
{% endblock %}

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

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

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

  const docSearch = docSearchReady()
  const index = docSearch.client.initIndex('wagtail')
  index.search(
    query,
    {
      hitsPerPage: 50,
      facetFilters: [getVersionFacetFilter()]
    }
  )
  .then(({ hits }) => addResultsList(hits, query, searchResultsContainer))
  .catch((error) => console.log(error))
}

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)
</script>
{% endblock %}