Search code examples
vue.jsvue-select

Input delay in vue-select


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

Solution

  • 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
        }
    }