Input delay in vue-select

Question

Using vue-select I'm searching for a way to add a delay on input so that a ajax-search-request is send after the user has paused the input for e.g. 500ms.

How can I archive this? In the documentation I can't find any option for that.

In my solution I have a custom ajax-filter:

<vSelect
        class="my-select"
        @search="fetchOptions"
        :filterable="false"
        :options="options"
        label="name"
        v-model="selectedVal"
        :disabled="disabled"
        :reduce="(result) => result.id"
    >

score 0 · Answer 1 · answered Mar 16 '22 at 09:54

I came up with adding lodash.debouncer. For interest, following my solution:

 <vSelect
        class="my-select"
        @search="loadDebouncer"
        :filterable="false"
        :options="options"
        label="myLabel"
        v-model="selectedVal"
        :disabled="disabled"
    >

import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import debounce from 'lodash.debounce';

@Component
export default class MySelect extends Vue{
    public loadDebouncer = debounce((searchString, loading) => this.fetchOptions(searchString, loading), 500);

    public async fetchOptions(searchString: string, loading:any){
        //Load my list
    }
}

Input delay in vue-select

1 Answers1