Implement search-as-you-type form for Pagefind search

What does this MR do and why?

WHAT

  • This MR adds a feature for archive sites where we use Pagefind search backend.
    • Feature: search-as-you-type and show results on the search form box.
  • The changes also include a generic search form and combines logic to support both Elasticsearch and Pagefind.

WHY

  • We want to provide similar functionality to Elasticsearch for those who are using local copies of the Docs site.
  • This will give them top search results early-on during their search process without having to travel to search results page.

Screenshots, screen recordings, or links to review app

Landing page search for pagefind:

image

No results found:

image

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment.
  2. Pagefind review: https://docs.gitlab.com/review-mr-649/
  3. Elasticsearch review: Checkout this branch and run make view to make sure everything we had for elasticsearch especially for the search form is still working the same. Make sure to check if API keys like ELASTIC_CLOUD_ID is missing, it shows the error on both landing page and search results page.

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Closes #313 (closed)

Edited by Hiru Fernando

Merge request reports

Loading