根据输入更改 React-Select 选项

Question

我正在使用 React-Select 让用户能够选择多个 select 不同的选项。唯一的问题是，我有一个 3k 条目的列表，我想将初始选项列表限制为只有 10 个结果，直到他们开始输入字符。 React-Select 已经根据输入字符串评估字符串输入和 returns 匹配元素，但我想在 FULL 选项列表上进行搜索，并更改选项 dropdown/results 基于匹配 returns.

例如：

const optionsList1 = [
        { label: 'Option 1', value: 'Option 1'},
        { label: 'Option 2', value: 'Option 2'},
        { label: 'Option 3', value: 'Option 3'},
        { label: 'Option 4', value: 'Option 4'},
    ];

const optionsList2 = [
        { label: 'Option 1', value: 'Option 1'},
        { label: 'Option 2', value: 'Option 2'},
        { label: 'Option 3', value: 'Option 3'},
        { label: 'Option 4', value: 'Option 4'},
        { label: 'Option Test1', value: 'Option Test1'},
        { label: 'Option Test2', value: 'Option Test2'},
        { label: 'Option 7', value: 'Option 7'},
        { label: 'Option 8', value: 'Option 8'},
    ];

例如，现在这是我的 React-Select 标记：

<CreatableSelect
   isMulti
   onChange={this.handleSelectionChange}
   options={optionsList1}
   name="selectedItems"
   styles={customStyles}
   value={this.state.selectedItems}
   placeholder="* Selection Items"
/>

目前，当有人搜索字符串“选项 4”时，它会 return 选项列表 1 中的选项 4（这是正确的），但我希望它搜索选项列表 2，然后使用匹配的 returned 值更新 optionsList1。我不能只更改 optionsList1，因为那样它会向列表添加 3k 个结果并且性能很慢。

所以我想要发生的是有人输入搜索输入，例如“Option Test”，然后它会检查 optionsList2，发现匹配字符串中有两个带有“Option Test”的结果，然后 optionsList1 将动态更新为：

optionsList1 = [
            { label: 'Option Test1', value: 'Option Test1'},
            { label: 'Option Test2', value: 'Option Test2'},
        ];

然后用户可以 select 来自 returned 值的选项（如果匹配）。

编辑：onChange 函数只是设置 selected 项目的状态。与搜索查询没有任何关系。

Answer 1

在他们的旧问题文档中找到了答案。发布它的用户是：Github

上的 vitexikora

const resultLimit = 10
let i = 0
return <Select filterOption={({value}, query) => value.indexOf(query) >= 0 && i++ < resultLimit} onInputChange={() => { i = 0 }} />

这只返回最多 10 个匹配结果，并将初始选项限制为最多 10 个。

根据输入更改 React-Select 选项

Change React-Select Options Based on Input

javascript

reactjs

react-select