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