Fuzzy Search Made Easy with Fuse.js

Ever built an application where users need to find specific items from a large list? Standard searches are great, but what happens when a user misspells something, or uses a slightly different variation of a term? That’s where fuzzy search comes in.

Fuzzy search, also known as approximate string matching, allows users to find relevant results even with typos or variations in their query. It’s a fantastic way to improve user experience and make your application more forgiving. Today, we’re going to look at how to implement this using a popular JavaScript library: Fuse.js.

What is Fuse.js?

Fuse.js is a lightweight, powerful, and flexible fuzzy-searching library. It’s written in JavaScript and can be used in both browser and Node.js environments. It uses a sophisticated algorithm to calculate the similarity between a search query and items in a list, returning the best matches.

Getting Started

First things first, let’s get Fuse.js into our project. If you’re using npm or yarn, it’s as simple as:

1
npm install fuse.js
2
# or
3
yarn add fuse.js

If you prefer not to use a package manager, you can include it via a CDN.

Basic Implementation

Let’s imagine we have a list of programming languages and we want to be able to search through them, even if the user makes a mistake.

Here’s our data:

1
const languages = [
2
  { id: 1, name: "JavaScript", category: "Web" },
3
  { id: 2, name: "Python", category: "Backend" },
4
  { id: 3, name: "Java", category: "Enterprise" },
5
  { id: 4, name: "TypeScript", category: "Web" },
6
  { id: 5, name: "Ruby", category: "Backend" },
7
  { id: 6, name: "C++", category: "Systems" },
8
  { id: 7, name: "Go", category: "Backend" },
9
  { id: 8, name: "Swift", category: "Mobile" },
10
  { id: 9, name: "Kotlin", category: "Mobile" },
11
  { id: 10, name: "PHP", category: "Web" }
12
];

Now, let’s initialize Fuse.js with this data. We need to tell Fuse.js which properties of our objects it should search through. This is done using the keys option.

1
import Fuse from 'fuse.js';
2

3
const options = {
4
  keys: ['name', 'category'] // Properties to search within
5
};
6

7
const fuse = new Fuse(languages, options);

With fuse initialized, we can now perform searches. Let’s say a user types "Javascrpt" (a common typo for “JavaScript”).

1
const searchResults = fuse.search('Javascrpt');
2

3
console.log(searchResults);

If you run this, you’ll see an array containing the result for “JavaScript” because Fuse.js intelligently matches the slightly misspelled query. The output will look something like this:

1
[
2
  {
3
    "item": {
4
      "id": 1,
5
      "name": "JavaScript",
6
      "category": "Web"
7
    },
8
    "refIndex": 0
9
  }
10
]

The item property holds the original object that matched, and refIndex is its original index in the languages array.

Advanced Options

Fuse.js offers a lot of configuration for fine-tuning your search. Some useful options include:

• includeScore: If set to true, each result will include a score property indicating how well it matched (lower is better).
• threshold: A value between 0 and 1. A lower threshold means fewer results but higher accuracy. The default is 0.6.
• distance: The maximum distance between the search term and the matched characters. Defaults to 100.
• ignoreLocation: If true, Fuse.js will ignore the location of the match within the string. Defaults to false.
• findAllMatches: If true, returns all matches rather than just the best one. Defaults to false.

Let’s try an example with scores:

1
const advancedOptions = {
2
  keys: ['name', 'category'],
3
  includeScore: true,
4
  threshold: 0.4 // More strict matching
5
};
6

7
const advancedFuse = new Fuse(languages, advancedOptions);
8

9
const advancedResults = advancedFuse.search('Pythn'); // Typo for Python
10

11
console.log(advancedResults);

This would give you results with their corresponding scores, allowing you to sort or filter further if needed.

Why Use Fuzzy Search?

In short, it makes your users happier. They don’t have to be perfect typists. It reduces frustration and helps them find what they’re looking for faster, even if they aren’t entirely sure how to spell it. For applications with extensive datasets, like e-commerce sites, documentation platforms, or even large configuration files, fuzzy search is not just a nice-to-have, it’s often a necessity.

Fuse.js makes implementing this powerful feature remarkably straightforward. Give it a try in your next project!