Question

所以我需要做的是具有react-select的搜索形式，不仅可以对id值进行反应，而且我还希望它能够搜索select选项的同义词。

例如在度量单位列表中：

{
"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
}

在我的render方法中，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添加更多可搜索的选项？

1 个答案: