Question

我正在使用React-Select使用户能够多选不同的选项。唯一的问题是，我有一个3k条目的列表，并且我希望将初始选项列表限制为仅10个结果，直到它们开始输入字符为止。 React-Select已经评估了字符串输入并根据输入的字符串返回匹配的元素，但是我想在FULL选项列表中进行搜索，并根据匹配的返回值更改选项下拉列表/结果。

例如：

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"
/>

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

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

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

然后用户可以从返回的值中选择一个匹配的选项。

编辑：onChange函数只是设置所选项目的状态。与搜索查询无关。

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个。

根据输入更改反应选择选项

1 个答案: