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 in a unit of measures list:
{
"id": "MIN",
"name": "minute",
"synonym": "time"
}
I want to be able to type in "min", "minute" or "time" and end up with the selection "minute".
I tried it with pushing another element into the array:
mapUnitOfMeasure()
{
const results = [ ];
for(const c of measureUnits)
results.push({ value : c.id, label : c.name, syn: c.synonym });
}
return results
}
In my render method, the select element looks like this:
<Select
className="react-select"
placeholder=""
disabled={this.state.disabled}
value={this.state.value}
onChange={this.handleChange.bind(this)}
onBlur={this.handleBlur.bind(this)}
searchable={true}
clearable={true}
multi={false}
noResultsText={i18n.getMessage('CurrencyInput.search.form.noResults')}
options={this.mapUnitOfMeasure()} />
)
But "syn" never reacts to a search query.
Anyone have an idea how i can make it work?
I suggest you to use
filterOptions
props that allows you to create your own filter function.By default it works like this:
If you want to make a search in
label
andsyn
you can use the function like this:WARNING
Using
filterOptions
will overridefilterOption
,matchPos
,matchProp
,ignoreCase
andignoreAccents
options. You will have to take care of those props by yourself.Here a live example.