How can I implement closed auto-suggestions with MeiliSearch in a Gatsby and Strapi project?

Tech Stack:

Frontend: Gatsby
Backend: Strapi
Search Engine: MeiliSearch

Description: I have successfully integrated a global MeiliSearch solution into my Gatsby and Strapi project. The current implementation supports general search queries across various fields. However, I now need to implement a auto-suggestion feature. Current Implementation:

Here's a snippet of the current code setup:

import { MeiliSearch } from 'meilisearch'

export const indexes = [
  {
    index: 'event-detail',
    page: 'Event Detail',
    fieldsToSearchOn: [
      'HeroText',
      'HeroDescription',
      'JumpScrollMenu.MenuTitle',
      'HighlightsHeader.Title',
    ],
  },
]

const baseUrl = process.env.GATSBY_SITE_URL

const meiliSearchClient: MeiliSearch = new MeilisearchAutocompleteClient({
  host: process.env.MEILISEARCH_HOST,
  apiKey: process.env.MEILISEARCH_MASTER_KEY,
})

const getFilteredDataForIndex = async (index: any, filterValue: string) => {
  return await meiliSearchClient
    .index(index.index)
    .search(filterValue, {
      limit: 100,
      attributesToSearchOn: index.fieldsToSearchOn,
      attributesToRetrieve: ['id', 'Slug'],
    })
    .then((data: any) => {
      console.log(data)
      return data?.hits?.map((Item: any) => {
        return {
          keyWord: filterValue,
          redirectUrl: `${baseUrl + (Item.Slug || index.index).replace(/\//g, '')} `,
          value: Number(Item.id),
          page: index.page,
        }
      })
    })
}

export const systemWideData = async (filterValue) => {
  const filteredData = []
  const promises = indexes.map((index) =>
    getFilteredDataForIndex(index, filterValue),
  )

  const results = await Promise.all(promises)

  results.forEach((newData) => {
    if (newData.length > 0) {
      filteredData.push(newData[0])
    }
  })

  return filteredData
}

I want to implement auto-suggestions in the search input field so that when a user types, it provides relevant suggestions in real-time. How can I achieve this?

meilisearch / strapi-plugin-meilisearch

How can I implement closed auto-suggestions with MeiliSearch in a Gatsby and Strapi project? #928