Article summary
My favorite kinds of tools are the ones you barely have to use!
While building a feature that allowed users to fuzzy search over a list dynamically, I came across Fuse.js. The data users search for is part of a deeply-nested object.
The Fuse.js website calls the tool “a powerful, lightweight fuzzy-search library, with zero dependencies.” Always try the easy route first.
Usage
The main draw to Fuse is the simplicity and performance of the library and not needing a dedicated backend to handle the search.
Consider the test data from the Fuse documentation:
const testData = [
{
title: "Old Man's War",
author: {
name: 'John Scalzi',
tags: [
{
value: 'American',
},
],
},
},
{
title: 'The Lock Artist',
author: {
name: 'Steve Hamilton',
tags: [
{
value: 'English',
},
],
},
},
];
At its core, all you need to set Fuse up is an array with data and configuration options.
const options = {
includeScore: true,
includeMatches: true,
keys: ['title', 'author.tags.value'],
};
const fuse = new Fuse(testData, options);
const result = fuse.search(searchValue);
While Fuse doesn’t care about the shape of your data, the keys passed within the options are used as a path and must eventually point to a string.
Given a searchValue of “old,” the result object looks like this:
[{
"item": {
"author": [Object],
"title": "Old Man's War"
},
"matches": [[Object]],
"refIndex": 0,
"score": 0.01857804455091699
}]
Here we are given a score corresponding to how close of a match this item is to the searchValue; 0 is perfect, and 1 is a mismatch. We are also provided a refIndex that tells us the item’s index within our data.
It’s important to note that this Fuse only tracks the items it has searched, so if your path is very narrow, you may have to use this refIndex as a starting point to trace it within a larger object.
The setup is relatively simple, yet the functionality is wonderful when paired with a simple text input field for users.
Configuration Options
The multitude of configuration options Fuse provides allows you to fine-tune the search experience better. Some options my team and I have found valuable are threshold, shouldSort, and includeMatches.
Setting the threshold option allows you to raise or lower the fuzzy searching capabilities. A threshold of 0.0 requires a perfect match, while a threshold of 1.0 would match anything. The default threshold level is 0.6, but 0.2 seems the sweet spot for my uses.
Consider Fuse
Overall, the next time you’re tasked with creating a search field, consider using Fuse.js to do the heavy lifting.
Fuse provides more methods than search, allowing you to manipulate the dataset.
When to use Fuse:
- Client-side fuzzy searching over small to moderately large data sets.
- If you can’t justify setting up a dedicated backend to handle the search, setting up an elastic search service may be overkill for many use cases.
Fuse has no DOM dependencies, so if you’d like to use it within your backend, that’s possible too!