Fast, Lightweight Fuzzy Search

[paullj]

---

publishedAt: 2022-06-19T12:00Z
description: How the fast and lightweight fuzzy searching for this website works
slug: fast-lightweight-fuzzy-search-using-fuse.js

NOTE: Since writing this post, I have removed Fuse.js altogether in favour of an even simpler method. The new script is available here and just searches if letters occur roughly in the correct order of the search pattern. Fuse.js is still a great library and is a great option for larger datasets. Especially, if searching full bodies of text and not just titles.

For a small static blog, server side searching via Algolia or ElasticSearch can be overkill. This website uses a small lightweight library Fuse.js for client-side fuzzy searching. You can try out the search on the front page here by typing / or clicking in the search bar.

First of all, what is fuzzy searching? To quote the library directly:

Generally speaking, fuzzy searching is the technique of finding strings that are approximately equal to a given pattern (rather than exactly).

Since we already have our posts data in JSON, using this library to add a search functionality only requires a few lines of code as shown below.

import Fuse from 'fuse.js';
...
onMount(() => {
    fuse = new Fuse(posts, {
      keys: [
        "title",
      ]
    });
  })

Another bonus with using Fuse.js is that, because it has no external and DOM dependancies, it can also be used on the backend if required. In our case, this means that it is possible to build a search index when our static site is built and deployed. This has not been implemented yet, but with more posts this will be a useful feature to add.

Using Svelte also means that adding quality of life features like shortcuts to focus searching is very easy. Listening for the / key to be pressed can be intercepted is done with the snippet below.

<svelte:body
  on:keydown={
    (event) => { 
      if(event.key === '/' && document.activeElement !== element) {
        event.preventDefault()
        element.focus();
        element.select();
      }
    }
  }
/>

The whole search component used for this website is available here. It is lightweight, quick and very simple to add to any existing small SvelteKit blog, with possibilities for larger datasets too.