如何向 React-Select 添加更多可搜索选项？

Question

所以我需要做的是让 react-select 的搜索表单不仅对 id 值做出反应，而且我还希望它能够搜索选择选项的同义词。

例如在度量单位列表中：

{
"id": "MIN",
"name": "minute",
"synonym": "time"
}

我希望能够输入“分钟”、“分钟”或“时间”并最终选择“分钟”。

我尝试将另一个元素推入数组：

mapUnitOfMeasure()
{
    const results = [ ];
    for(const c of measureUnits)
        results.push({ value : c.id, label : c.name, syn: c.synonym });
    }
    return results
}

在我的渲染方法中，选择元素如下所示：

<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()} />
        )

但“syn”从不响应搜索查询。

有人知道我怎样才能让它工作吗？

Answer 1

我建议你使用filterOptions props，它允许你创建自己的过滤器功能。

默认情况下它是这样工作的：

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

如果要在label 和syn 中进行搜索，可以使用如下函数：

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

警告

使用filterOptions 将覆盖filterOption、matchPos、matchProp、ignoreCase 和ignoreAccents 选项。这些道具你必须自己照顾。

Here 一个活生生的例子。