Fuzzy-search using useFilter?

[deadcoder0904]

I am building a timezone selector using react-aria. The implementation is the same as ComboBox → https://codesandbox.io/s/hardcore-moon-xzc4r?file=/src/App.tsx

I am wondering if I can use fuzzy-search as my timezone field looks like (GMT+05:30) Asia/Kolkata so it gets a little hard to type it out.

If I type asiakol then it doesn't show me Asia/Kolkata. It needs to be asia/kol for it to show.

I want it to use Fuzzy Search. Is this possible? useFilter currently only has contains, startsWith, & endsWith but would love to do fuzzy-matching.

[snowystinger]

You can do whatever filtering you want. We have a useFilter hook that provides some basic things out of the box. https://react-spectrum.adobe.com/react-aria/useComboBox.html#custom-filtering but it's just returning true or false to the javascript filter function.

If you make your own filtering, you probably want to make use of our useCollator hook so it's easier to internationalize. You can see the implementation of our useFilter here https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/i18n/src/useFilter.ts#L29 it's not too complex.

[deadcoder0904]

@snowystinger yeah, i already saw custom filtering thing after posting this. i'm using useFilter as i don't need to internationalize at the moment.

is there anything wrong if i use it?

[deadcoder0904]

no worries, useCollator looks simple as well :)

[snowystinger]

Just to be clear, useFilter is already handling internationalizing because it uses useCollator.
useFilter was meant to handle a couple of simple cases. There is nothing wrong with using it, unless you need more sophisticated filtering behavior such as fuzzy search. Then you need to write your own and can use useFilter as a guide.

[deadcoder0904]

I used the custom filtering section by only replacing it with fuse.js (demo → https://codesandbox.io/s/combobox-with-fuse-js-t7u4c?file=/src/App.tsx)

const fuse = React.useMemo(() => new Fuse(timezonesList, options), []);
  const filteredItems = React.useMemo(
    () => fuse.search(filterValue).map((tz) => tz.item),
    [filterValue, fuse]
);

Eventually, replaced fuse.js with https://github.com/ajitid/fzf-for-js as fuse was giving a bug but fzf worked fine! Only need to replace the above section a bit :)