So I have set up my Fuse.js as such:
const fuse = useMemo(() => {
return new Fuse<Fees>(data, {
includeMatches: true,
keys: [{ name: "name" }],
ignoreLocation: true,
useExtendedSearch: true,
threshold: isStrictSearch ? 0 : 0.6,
});
}, [data, isStrictSearch]);
so basically isStrictSearch is a boolean state, which is toggled on and off. When it's toggled on (true), then I set the threshold of Fuse.js to 0. However this does not work as perfectly as I want it to be. So for example I have these cases:
DATA
const data = [
{
"name": "Surimi Maki Sticks - 1kg",
...
},
{
"name": "No Worries Wild Berry Can",
...
},
...
]
Case 1
Search query: Maki Sticks 1kg.
Result: Surimi Maki Sticks - 1kg.
This shouldn't happen because it should take - into account.
Case 2
Search query: No Worries Can.
Result: No Worries Wild Berry Can.
This also shouldn't happen because it should take Wild Berry into account.
I'm not sure how to achieve this, I have tried other combinations for the Fuse.js options, but still not able to achieve the result I want.
I have decided to use another logic than using Fuse.js to handle this issue: