JavaScript

Implementing "Fuzzy Search" using Fuse.js

2 min. read

Have you ever tried to search via a search bar, but misspelled your search terms and got ZERO results? Being forced to delete your typos and retyping your search to be 100% precise can be detrimental to your e-commerce website or application's traffic and conversion. Whether you typed the wrong characters, or just didn't know how to spell a word correctly, searches yielding "zero results" on your website can prompt users to bounce and go elsewhere to find the product they are looking for. "Fuzzy searches", also known as approximate string matching searches, can solve the issue of user-error queries.

Fuzzy Searching (often colloquially referred to as "approximate string match" searching) is the technique of finding strings that match a pattern approximately (rather than exactly).

Fuzzy Search IRL (in real life)

Let's say a customer is shopping for a product that is the color PINK. If the user is shopping online, they may use a preset filter for the color of the product, or simply type "pink" in the search bar as their query. But what happens if the customer misspells the word? Fuzzy search algorithms match queries based on a "fuzziness score" that the user inputs vs the pool of possible results.

In this example, let's imagine that the customer has typed "punk" (with the letter "u" instead of "i"). If the search feature has implemented fuzzy searching, the results will return with products that are related to the term "punk", and will also include products related to the term "pink." It can also return even the lesser related words of "punt" or "pint". Without fuzzy search implemented, the search results may yield products that only relate to "punk", as it is only looking for precise matches. By generating approximate matches, fuzzy search can be a lifeline for you or your client's website.  

How to implement fuzzy searching

In web development, there are many useful libraries available for use. At Tevpro, we like using the Fuse.js library for implementing fuzzy searching on our client's website or application.

A developer can simply download the library, i.e. via npm or yarn, then import the module. Once downloaded, the developer is able to use fuse.js as needed.

Fuse.js is a powerful, lightweight fuzzy-search library, with zero dependencies.

Fuzzy Search Example Implementation

List of things to search through
[
  {
    "title": "Old Man's War",
    "author": "John Scalzi",
    "tags": ["fiction"]
  },
  {
    "title": "The Lock Artist",
    "author": "Steve",
    "tags": ["thriller"]
  }
]
Source: https://fusejs.io/examples.html
Sample Code (JavaScript)
const options = {
  includeScore: true,
  // Search in `author` and in `tags` array
  keys: ['author', 'tags']
}

const fuse = new Fuse(list, options)

const result = fuse.search('tion')
Source: https://fusejs.io/examples.html

Conclusion

Fuzzy searches are outstandingly useful and critically important for e-commerce websites and applications. Customers must find what they are looking for on your product pages, or they will quickly go elsewhere.  This search technique will enhance user experience, drive traffic to your website or application, and likely produce more conversions. Start using fuzzy search in your application today!

Tevpro is a custom software development firm founded in Houston, Texas. We help companies of all sizes automate and optimize their most complex business and financial systems processes. We'd love to work with you or help answer any questions.

Sources

Kim Pham

Senior Front-end Web Developer