Implements fuzzy searching

[mcbalaam]

About the PR

Implements fuzzy searching using https://github.com/Nozbe/microfuzz

Fuzzy searching, or approximate string matching, is the technique of finding strings that mach the pattern approximately rather than exactly, which makes it easier to search for strings in a large array of data, even by fragments. "wo chai" will find "wooden chair" while in smart mode and "wobble chamber lid" while in aggressive mode.

Demonstration:

2025-05-11.02-26-33.mp4

Why's this needed?

A lot of interfaces that provide searching for entries will benefit from this.

Implementation

useFuzzySearch is a hook that accepts an array of items and returns a matched array any time the setQuery hook is updated. Below is a simple showcase:

const items = [
	"first item",
	"second item",
	"third item",
]

const { query, setQuery, results } = useFuzzySearch({
  searchArray: items, // an array to match
  matchStrategy: 'smart', // which matching strategy to use
  getSearchString: (item) => item, // a hook to fetch the value of the input field
});
  
<Input
  value={query}
  onChange={setQuery}
/>
<Box mt={2}>
  {results.map((item, index) => (
    <Box key={index}>{item}</Box> // the mapped array 
  ))}
</Box>

[jlsnow301]

Mostly nits. Curious if there was any process to you selecting this library. I have no preferences though

[mcbalaam]

Mostly nits. Curious if there was any process to you selecting this library. I have no preferences though

I was looking for something simple and lightweight. Fuse was too large and complicated, ts-fuzzysearch wasn't updated in years, others didn't have an npm package or it was outdated aswell

[jlsnow301]

I was looking for something simple and lightweight. Fuse was too large and complicated, ts-fuzzysearch wasn't updated in years, others didn't have an npm package or it was outdated aswell

tbf, this hasn't been either