Approaches to implement search autocomplete suggestions

While user is typing, I want it to suggest terms in a dropdown that can autocomplete. On the Next.js side, I think it’s just a typical debounced input field.

But is there any support for this feature in next-drupal? And how to configure for on the Drupal side?

Thanks.

(Please let me know if Issues is not the place for such discussions. If the discussion is open, I’ll probably post there.)

[shadcn]

@fnick851 The original question did not mention Search API so I went with the easiest solution 😃

You can totally replace getResourceCollection with getSearchIndex with filters.

[shadcn]

Yes. You can use a simple debounced field and an API route for filtering.

Here’s an example: /pages/api/autocomplete.ts

import { NextApiRequest, NextApiResponse } from "next"
import { getResourceCollection } from "next-drupal"

export default async function (
  request: NextApiRequest,
  response: NextApiResponse
) {
  if (request.method !== "POST") {
    return response.status(405).end()
  }

  try {
    const { search } = request.body

    if (!search) {
      throw new Error(`'search' missing`)
    }

    // Make a request to Drupal to find article containing search.
    const articles = await getResourceCollection("node--article", {
      params: {
        "filter[title][operator]": "CONTAINS",
        "filter[title][value]": search,
        "fields[node--article]": "title",
      },
    })

    return response.json(articles)
  } catch (error) {
    return response.status(422).end(error.message)
  }
}

You can now make a post request to this route to get articles containing search keywords.