Select - Autocomplete

The select autocomplete functionality allows you to search for a specific option with result highlighting

Basic Example

Autocomplete functionality can be enabled using the autocomplete property.

There are some considerations to be made when using autocomplete:

  • Search functionality is handled externally, using the @search event
  • You must provide a loading state using the loading property, if done asynchronously
  • You must update the available options array manually

<i-select
    v-model="selected"
    :options="options"
    autocomplete
    placeholder="Choose something.."
    @search="onSearch"
/>

Async Example

Combining the select autocomplete with your backend search is easy. Here’s how to do it:

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

If you’re looking for an example that uses pagination as well, check out the Advanced Select section.