How to implement Fuse.js with react-select

Viewed 165

I have listed in react-select, I want to implement Fusejs with react-select. I really searched over the internet but didn't find a proper solution to achieve my goal. Could someone please help me with how to use Fuzzy search in react-select.

JSON DATA

let cities: [{label:'Phase-8', value:'phase-8}]

Seach pattern: when I type 'phase8' or 'phase/8' or 'phase-8' or 'phase-' it will retrieve list in react-select.

<Select options={cities}/>
1 Answers

if you use the async Select/SelectCreatable component, you can use the loadOptions prop, to which you can pass a function which accepts the current query and should return a Promise, which resolves to the options that are displayed. see the docs for info.

if you create a Fuse instance with the selectable options, then you can base loadOptions on fuse.search.

in order to implement this efficiently, there are a couple more things to keep in mind, and i would recommend inspecting the following snippet by tomkaar on codesandbox, which implements exactly what you are looking for: https://codesandbox.io/s/lwivu. shoutout to the author of that snippet!

Related