React-select: Better Filtering Option

[jehartzog]

By default the built in filterOption uses indexOf which is not very useful for end-users searching for multi word matches.

Throwing a string Fuzzy matching library at this may help with this, but the ones I looked at all required the entire list of options, not getting them one at a time like this lib provides.

I ended up writing a tiny custom filter that worked far better for our users, and created a wrapper so I could import that each time rather than having to always add it in. Sharing it here in case it helps anyone else, and I'd be happy to do a PR to update the default filtering (with options and all) if desired.

import React from 'react';
import Select from 'react-select';

// Wraps the react-select to use a better filter method, current one relies on indexOf which isn't great for searching large lists
// New custom search matches if all words in box are found anywhere in the option.label, case in-sensitive
const customFilterOption = (option, rawInput) => {
  const words = rawInput.split(' ');
  return words.reduce(
    (acc, cur) => acc && option.label.toLowerCase().includes(cur.toLowerCase()),
    true,
  );
};

const CustomReactSelect = props => (
  <Select filterOption={customFilterOption} {...props} />
);

export default CustomReactSelect;

[afkatja]

This is perfect, thank you!

[glebtv]

Currently, there seems to be no way for custom filtering + sorting, for example if I want to use matchSorter, except for like this:

<Select
          options={matchSorter(members, this.state.inputValue, {keys: ["first_name", "last_name", "slug"]})}
          filterOption={false}
          inputValue={this.state.inputValue}
          onInputChange={(v) => this.setState({inputValue: v})}
/>

Is there a better option?

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!

[chandra10207]

For eg.

If my options contain the label "Red face and eyes". while searching on the field, if user type "red face", an option with "Red face and eyes" appears. However, If the user input is "red eyes" then it shows no options.

I tried this option and option from the issue below, but still not working.

Is there any option to search for options by word or similar solution for my case.

https://github.com/JedWatson/react-select/issues/4174

Thanks.