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

Question

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

例如在度量单位列表中：

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

我希望能够输入 "min"、"minute" 或 "time" 并以 selection "minute".

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

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

在我的渲染方法中，select 元素看起来像这样：

<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 允许您创建自己的过滤器功能的道具。

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

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 一个活生生的例子。

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

How can i add more searchable options to React-Select?

javascript

reactjs

react-select