Search func with custom hook

[IRediTOTO]

Hi, I read about Headless mode with hooks, but how to use it with custom search? Can you make demo code ? Thank you

[jvkolyadich]

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>
    );
};

[icaroscherma]

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.

[ivanjeremic]

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.

[tbleckert]

@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 array
• getOptions is used to fetch options

Both 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.