How to Implement Fuzzy Search on Your Website with Fuse.js?

Fuse.js is a JavaScript library that provides a simple and efficient way to perform fuzzy search on arrays of strings or objects. It uses a specific algorithm to find the best matches between a search query and the items in a list based on relevance, taking into account factors like character proximity and word order. This makes it a great tool for searching large data sets or implementing autocomplete functionality in web applications.

‍

‍

How to install Fuse.js?

You can install Fuse.js in several ways:

1: npm: If you’re using a Node.js project, you can install Fuse.js using npm by running the following command in your terminal:

‍

2: CDN: You can also include Fuse.js in your HTML file using a CDN, like this:

‍

3: Download: You can download the Fuse.js library from GitHub and include it in your project by linking to the file in your HTML file, like this:

‍

What is fuzzy searching?

Fuzzy search is a search algorithm used in Fuse.js, which is a JavaScript library for searching and filtering data. Fuzzy search provides approximate search results based on the matching of substrings, allowing for spelling errors, typos, and other forms of approximate matches. This makes it a useful tool for providing suggestions and autocompletion in search fields and forms, even when the user’s input does not match exactly with the data being searched.

Example:

An example of fuzzy search is searching for a word “book” in a list of strings [“bok”, “back”, “booklet”, “boot”]. With a fuzzy search algorithm, the search results would return all strings that contain the word “book” or a similar pattern, even with misspellings or typos, like “bok” and “booklet”. The fuzzy search algorithm would also assign a score to each match, indicating the degree of similarity between the search term and the result, allowing the results to be ranked in order of relevance. In this example, the string “book” would receive the highest score, followed by “booklet”, and so on.

‍

‍

Why should we use it?

• Flexibility: Fuse.js provides a lot of options and customizations, such as fuzzy search, search in specific fields, and custom scoring, making it a flexible tool for various search scenarios.
• Performance: Fuse.js is designed to be fast and efficient, even when searching through large datasets. This can help to provide quick search results to users, even on low-end devices.
• Easy integration: Fuse.js is a lightweight JavaScript library that is easy to integrate into existing projects. It also supports multiple programming paradigms and can be used with popular front-end frameworks like React and Angular.
• Cross-platform compatibility: Fuse.js works in all modern browsers and can also be used in Node.js environments, making it a versatile tool for both front-end and back-end applications.

Overall, Fuse.js is a powerful and flexible tool for adding search functionality to your JavaScript application.

‍

Is it better to use fuse.js in place of database for fuzzy search?

Using a database for fuzzy search can be resource-intensive, especially when dealing with large datasets, and it may require more complex queries and configurations to achieve similar results as with Fuse.js. Additionally, Fuse.js provides more flexibility and customization options in terms of search algorithms and ranking, which can be useful for tailoring the search experience to your specific use case.

While it can be a useful tool for implementing fuzzy search functionality on the client side, it is generally not a replacement for a database.

‍

Here are a few reasons why you would not want to use Fuse.js in place of a database for fuzzy search:

1. Performance: Databases are optimized for fast querying and can handle large amounts of data efficiently. Fuse.js, on the other hand, is designed to work on the client side, and querying a large dataset can slow down the application.
2. Data Integrity: Databases are designed to ensure data integrity, meaning they prevent data duplication, enforce data constraints, and guarantee data consistency. Fuse.js has no built-in mechanisms to ensure data integrity.
3. Scalability: If your dataset is large or grows over time, it may not be feasible to use Fuse.js for fuzzy search. Databases are designed to scale up as the amount of data grows.

That being said, Fuse.js can be a useful tool in combination with a database for implementing fuzzy search. You can use it to provide real-time search suggestions or to filter search results based on user input.

In summary, while Fuse.js can be a useful tool for fuzzy search, it is not a replacement for a database. A database provides a more robust solution for managing large amounts of data and ensuring data integrity, which is essential for most applications.

The choice of build will depend on your use case and the environment in which you are using Fuse.js.

‍

‍

Options you can use in Fuse.js:

isCaseSensitive — Enables case sensitive comparison or not

includeScore — This option, when set to true, will include the score for each match in the search results.

includeMatches — This option, when set to true, will include the matches and their positions within the search results.

minMatchCharLength — If the matches ought to be a part of the result set. When true, the indices of the matching characters are included in every record of the result set. As a result, they might be utilized for highlighting.

shouldSort — Whether to sort the result list, by score.

findAllMatches — When true, the matching function will proceed to the end of a search pattern even if a perfect match has already been identified in the string.

Keys — This option specifies the properties of the objects in the search data that should be searched. It can be set to a string or an array of strings, representing the keys or fields to search.

Fuzzy Matching Options

Location — This option determines the importance of the location of a match within the search data. A value of 0 means that the location of the match is not taken into account, while a value of 1 means that the location of the match is given the highest importance.

Threshold — This option sets the minimum score that a match must receive in order to be included in the search results. The higher the threshold, the more strict the search results will be.

Distance — This option sets the maximum allowed distance between the search term and a match. Lowering this value will result in more strict search results, while increasing it will result in more lenient search results.

ignoreLocation — When set to true, search will disregard distance and location, so it doesn’t matter where a pattern appears in the string.

Advanced Options

useExtendedSearch — This option, when set to true, will enable the use of extended search algorithms, which provide more accurate search results at the cost of performance.

getFn — The method to use to get the value of an object at the specified path. Nested paths will also be searched by default.

sortFn — The method to employ in order to sort every result. By default, the sort is done using the ascending relevance score and index.

ignoreFieldNorm — When this is the case, the field-length norm won’t be taken into account when calculating the relevance score (used for sorting).

fieldNormWeight — determines how much the scoring is influenced by the field-length norm. The field-length norm is ignored when a value of 0 is entered. Field-length norm effect will be somewhat diminished with a value of 0.5 and significantly increased at a value of 2.0.

‍

Example code how to use fuse.js :

‍

In this example, we first import the Fuse.js library and then create an array of objects representing books. Next, we define the options for the search, specifying that we want to search both the title and author properties. We then create a new instance of Fuse and pass in the data and options. Finally, we perform a search using the search() method and log the results. The search result will be an array of objects, each representing a match, with the properties specified in the keys option.

‍

‍

Lets see one more example with some fuse.js options :

In this example, we are using all of the available options in Fuse.js. We set the keys option to search both the title and author properties, set the threshold to 0.3, set the location to 0, set the distance to 100, set includeMatches to true, set includeScore to true, and set useExtendedSearch to true. Finally, we perform a search using the search() method and log the results, which will include the score for each match, as well as the matches and their positions within the search data.