Select - Advanced

The select component easily supports complex scenarios, with asynchronous autocomplete and pagination

Advanced Example

In some scenarios you need to search large amounts of data. You’ll be able to easily combine the asynchronous autocomplete with pagination.

There are some considerations to be made when using autocomplete with pagination:

Search functionality is handled externally, using the @search event
Pagination functionality is handled externally, using the @pagination event
You must provide a total number of options using the total property
You must provide a loading state using the loading property
You must update the available options array manually

Here you can see an example using asynchronous search and infinite scrolling:

HTML

<i-select
    v-model="selected"
    :options="options"
    :total="total"
    :label="renderLabel"
    :loading="loading"
    autocomplete
    placeholder="Choose something.."
    @search="onSearch"
    @pagination="onPagination"
/>