Adding a search feature to a static website can be challenging but luckily there are some great tools out there that can help. In this article, I will be using Fuse.js, a small fuzzy search library with zero dependecies. On a normal website, you would have a backend server with an API route to handle the search. If you are using a CMS (Content Management System), they ususally have a way to implement search via their API. If you’re dataset is small, using a fuzzy search library like Fuse.js is a great option.
For this article, I am going to use React, Tailwind and Typescript but you can use any frontend framework or library you like.
Note about dataset sizes
I do not recommend using this method for larger datasets. Fuzzy searching large datasets could cause performance issues for your users. Always use an API when working with larger datasets.
Installation
To get started, you will need to install Fuse.js.
User Interface
Initial search component with static data
Let’s build the search component with just some static HTML. The list for now will be a static list.
Adding state to the search component
Nice! We have our initial search component with some basic HTML and static data. Now let’s add some state to the component to handle the search input.
We need an event to fire when the user types into the input field. I will store what the user types in a state variable called query. Let’s make the function handleSearch to handle the input change. Your updated component should look like this:
Adding Fuse.js to the search component
Now that we have our search component working with state, let’s add Fuse.js to our component. I will use Fuse.js to search through the list of games and filter the results based on the user’s input. The final component should look like this:
We added an array of games that will work as our dataset as a simple example. We then created a new instance of Fuse inside the search function with some options.
Here are what each option does here:
- keys: The keys to search in the dataset. We are searching in the title and system keys.
- includeScore: Whether to include the score in the result
- isCaseSensitive: Whether the search is case sensitive
- includeMatches: Whether to include matches in the result
- threshold: The threshold to consider a match. 0.0 is perfect match and 1.0 is match anything
- minMatchCharLength: The minimum number of characters to match
The list was updated to show the results of the search. If there are no results, the list will not be shown. The search function was also updated to call the search method from Fuse. You might have to adjust the Fuse.js options to fit your needs.
Conclusion
That’s it! You now have a fuzzy search feature on your static website using Fuse.js. You can now search through the list of games and filter the results based on the user’s input. Remember that this is only suitable for smaller datasets, always use an API if you are working with large datasets. Feel free to customize the search component to fit your needs.
Resources
Fuse.js