Closed IRediTOTO closed 3 years ago
Took me a while to realize that you need to provide the options for fuse.js. You can go to https://fusejs.io/api/options.html for a full list.
const CustomSelectSearch = ({ options, value }) => {
const [snapshot, valueProps, optionProps] = useSelect({
options,
value,
search: true,
// fuse.js options
fuse: {
keys: ['name', 'groupName'],
threshold: 0.3
}
});
return (
<div>
<input {...valueProps} value={snapshot.focus ? snapshot.search: snapshot.displayValue}/>
{snapshot.focus && (
<ul>
{snapshot.options.map((option) => (
<li key={option.value}>
<button {...optionProps} value={option.value}>{option.name}</button>
</li>
))}
</ul>
)}
</div>
);
};
If somebody stumbles upon this issue, with v3 you need to explicitly declare your filterOptions
, which means...
// Import the default fuzzy search from the library
import { useSelect, fuzzySearch } from 'react-select-search';
const MyCustomSelect = ({ options, value, multiple, disabled, onChange, ...other }) => {
const [snapshot, valueProps, optionProps] = useSelect({
options,
value,
multiple,
disabled,
onChange,
// declare fuzzySearch in filterOptions and enable search, it's not done auto-magically
search: true,
filterOptions: fuzzySearch,
});
// ...
return ...;
};
I will ping #165 so similar issues are pointed to this.
All these hooks look great but can somebody please create a full example here or on codesandbox? I try now for 2 hours to get the search working even the normal one does not work with any custom hooks, all I get when I start typing are empty items.
@ivanjeremic and @IRediTOTO , you have two options here that you can use together or not, depending on your use case. Basically:
filterOptions
is used to modify the options arraygetOptions
is used to fetch optionsBoth these options run on mount/when options are updated and on search if search is enabled.
The package comes with a built-in fuzzy search function based of Fuse.js that @icaroscherma displays in the example code. If you don't want to use that you can take a look at this: https://github.com/tbleckert/react-select-search/discussions/176#discussioncomment-587024 . Also take a look at this example to see how getOptions
work https://react-select-search.com/?path=/story/async--fetch .
Both filterOptions
and getOptions
works with both the useSelect
hook and the component.
Hi, I read about Headless mode with hooks, but how to use it with custom search? Can you make demo code ? Thank you