Change React-Select Options Based on Input

Question

I'm using React-Select to give users the ability to multi-select different options. The only problem, is that I have a list of 3k entries, and I'd like to limit the initial options list to only 10 results UNTIL they start typing in characters. React-Select already evaluates the string input and returns matching elements based on the input string, but I'd like to conduct the search on the FULL options list, and change the options dropdown/results based on the matching returns.

Ex:

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'},
    ];

For instance, right now here is my React-Select Markup:

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

Currently, when someone searches for the string, "Option 4", it would return Option 4 from optionsList1, (which is correct), but instead I'd like it to search optionsList2, and then UPDATE the optionsList1 with the returned values that are a match. I cannot just change the optionsList1, because then it would add 3k results to the list and the performance is slow.

So what I'd like to happen is someone types in an input for a search like, "Option Test" and then it would check optionsList2, find that there are two results with "Option Test" in the matching string, and then optionsList1 would be dynamically updated to be:

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

And then users can select the option from those returned values if it's a match.

EDIT: The onChange function is just setting the state for the selected items. Doesn't have anything to do with the search query.

Answer 1

Found the answer on their documentation of an older issue. User who posted it was: vitexikora on Github

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

This only returned the matching results up to 10, and limited the initial options up to 10 as well.