# A lightweight, fuzzy, client-side search template for Hugo

**URL:** <https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684>\
**Category:** tips & tricks\
**Created:** [July 24, 2022, 10:48pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684 "2022-07-24T22:48:22Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [July 24, 2022, 10:48pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/1 "2022-07-24T22:48:22Z")

</div>

There are a bunch of these templates/tutorials floating around. Figured I’d throw another one into the mix for Fuse.js.

See the `README.md` for details.

- [Demo](https://hugo-client-side-search-template.netlify.app/)
- [GitHub Repo](https://github.com/zwbetz-gh/hugo-client-side-search-template)

---

<div class="post-metadata">

**Author:** ![nfriedli](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/nfriedli/32/26027_2.png) [@nfriedli](https://discourse.gohugo.io/u/nfriedli)\
**Post date:** [July 25, 2022, 12:17pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/2 "2022-07-25T12:17:10Z")

</div>

Thank you very much for sharing this clean and well documented GitHub repository.

I’ve been using Fuse.js for a small site in production for a year. It’s a very simple site to search for a protestant parish in the French speaking part of Switzerland:

- [ma-paroisse.ch](https://ma-paroisse.ch/)
- [GitHub](https://github.com/nfriedli/ma-paroisse.ch)

I will use your implementation as inspiration to improve my own. Fuse.js is really a nice tool (like Hugo).

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [July 25, 2022, 12:47pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/3 "2022-07-25T12:47:06Z")

</div>

@nfriedli Glad to share it 👍 and I like the site you’ve made.

This was my first time using hugo’s `js.Build` and I was quite pleased - it transpiled TS into JS, bundled, minified, and fingerprinted the resource in a blink of the eye.

This was my first time using Fuse.js as well - simple API, fast, and was the simplest way I found to get fuzzy matching.

I also got to explore the URLSearchParams API - so if you refresh the page and have a value in the `query` url param, it’ll pick that up and fire the search on it.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [September 26, 2022, 6:13pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/4 "2022-09-26T18:13:06Z")

</div>

Substring match highlighting has been [added](https://github.com/zwbetz-gh/hugo-client-side-search-template/issues/1).

---

<div class="post-metadata">

**Author:** ![tut](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@tut](https://discourse.gohugo.io/u/tut)\
**Post date:** [September 27, 2022, 10:23am UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/5 "2022-09-27T10:23:32Z")

</div>

How to adapt it for multilingual sites?

1. That is, without having to duplicate the main JS and search files.
2. To allow translation of the JSON keys. If I duplicate the main.js file, only the “title” can be translated.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [September 27, 2022, 2:29pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/6 "2022-09-27T14:29:40Z")

</div>

@tut - Short answer: am not sure.

* * *

Thinking out loud, you could generate a separate JSON index for each site language.

Then, depending on which site language was being used at the time, request that particular JSON index.

The TS file would probably need to be [executed as a template](https://gohugo.io/hugo-pipes/resource-from-template/), so that relevant strings could be swapped out, depending on the site language.

If you plan to tackle this, wishing you good luck 🍀

---

<div class="post-metadata">

**Author:** ![tut](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@tut](https://discourse.gohugo.io/u/tut)\
**Post date:** [September 30, 2022, 2:48pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/8 "2022-09-30T14:48:31Z")

</div>

New issue. The JS code fails the Content Security Policy I set up because I use `require-trusted-types-for 'script';` header. One issue raised in the console is the use of `innerHTML`.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [September 30, 2022, 2:52pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/9 "2022-09-30T14:52:34Z")

</div>

Perhaps we could continue this discussion here:  
[https://github.com/zwbetz-gh/hugo-client-side-search-template/issues](https://github.com/zwbetz-gh/hugo-client-side-search-template/issues)

---

<div class="post-metadata">

**Author:** ![tut](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@tut](https://discourse.gohugo.io/u/tut)\
**Post date:** [September 30, 2022, 3:02pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/10 "2022-09-30T15:02:31Z")

</div>

I am not on Github. I use Gitlab.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [September 30, 2022, 3:06pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/11 "2022-09-30T15:06:27Z")

</div>

Then maybe you should create a GitHub account. We are not going to use this forum to track issues for external projects.

---

<div class="post-metadata">

**Author:** ![tut](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@tut](https://discourse.gohugo.io/u/tut)\
**Post date:** [September 30, 2022, 3:13pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/12 "2022-09-30T15:13:45Z")

</div>

This is a forum topic. I had no idea how this affects your ability to monitor other topics? Anyways, I have (moral and privacy) reasons why I don’t use GitHub. I will look for an alternative solution for now. Cheers!

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [September 30, 2022, 7:08pm UTC](https://discourse.gohugo.io/t/a-lightweight-fuzzy-client-side-search-template-for-hugo/39684/13 "2022-09-30T19:08:13Z")

</div>