How to create a search results page in Hugo using FlexSearch?

support
1

Question: How to create a search results page in Hugo using FlexSearch (best practice)?

I’m using Hugo with FlexSearch for client-side search.

Current situation

  • Hugo generates an index.json at build time

  • FlexSearch is used in JavaScript

  • Right now search works as inline autocomplete

    • User types in the input
    • Matching titles are shown
    • Clicking a result opens the page

This works fine, but it’s limited for larger result sets.

What I want to add

I want a dedicated search results page, for example:

/search/?q=nexon

Behavior:

  1. User types a query and presses Enter

  2. User is redirected to /search/

  3. The search page:

    • Reads the query from the URL
    • Runs FlexSearch
    • Displays all matching results

My questions

1. Is creating a search results page the right approach?

Is it better to:

  • Keep autocomplete search for quick access
    and
  • Add a full search results page for deeper browsing?

Or should everything be handled only on the search page?

2. Suggested / recommended way in Hugo?

What is the recommended Hugo structure for this?

For example:

  • Create content/search/_index.md
  • Create layouts/search/list.html
  • Load FlexSearch JS only on the search page

Is this the correct approach?

3. Basic implementation steps (high level)

I’m looking for simple guidance, not full code.

For example:

  • How to pass the query to the search page
  • How to read ?q= from the URL
  • Whether to reuse the same index.json
  • How to handle large result sets cleanly

Goal

  • Keep Hugo responsible for static data generation
  • Keep FlexSearch responsible for client-side searching
  • Have a scalable, maintainable search experience

Any better alternatives?

If there is a better or more standard way to implement search results in Hugo (with or without FlexSearch), I’d appreciate suggestions.

2

This theme uses Flexsearch. It might act as a guide for you. Files of interest—

  1. hugo-theme-zen/assets/libs/flexsearch.compact.js at main · frjo/hugo-theme-zen · GitHub
  2. hugo-theme-zen/assets/js/search.js at main · frjo/hugo-theme-zen · GitHub
  3. hugo-theme-zen/layouts/home.searchindex.json at main · frjo/hugo-theme-zen · GitHub
  4. hugo-theme-zen/layouts/_shortcodes/search.html at main · frjo/hugo-theme-zen · GitHub
  5. hugo-theme-zen/exampleSite/content/search.md at main · frjo/hugo-theme-zen · GitHub

(I copied the JS file number 2 and fed it to Claude AI to add additional features I needed)

I created a separate search.html template, but you could also go the shortcode route.

3

On the website https://student-and-teacher-hugo.netlify.app/, when a user types “student” in the search box, they should be redirected to a URL such as https://student-and-teacher-hugo.netlify.app/search?query=student. The search page should read the query from the URL and display all matching results that contain the word “student” in their title or content. Each result should appear as a separate clickable link, and the overall layout and design of the search results page should remain the same as the existing Student and Teacher page to ensure a consistent user experience. This is how I want the search results page to work.

4

That is a JS question and I doubt you will get much help here, because only Hugo related questions are allowed. In ths case, I recommend using Claude AI to do that for you.

5

ok thank you for you suggestion