'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 1:[1]
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
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | SNO |
