How Can I Add More Searchable Options To React-select?

So what i need to do is have the search form of react-select not only react to id an value, but i also want it to be able to search for synonyms of the select options. For example

Solution 1:

I suggest you to use filterOptions props that allows you to create your own filter function.

By default it works like this:

filterOptions={(options, filter, currentValues) => {
  // Do no filtering, just return all optionsreturn options;
}}

If you want to make a search in label and syn you can use the function like this:

filterOptions = (options, filterString, values) => {
  return options.filter(
    x => x.synonym.includes(filterString) || x.label.includes(filterString)
  );
};

WARNING

Using filterOptions will override filterOption, matchPos, matchProp, ignoreCase and ignoreAccents options. You will have to take care of those props by yourself.

Here a live example.