Autocomplete

Autocomplete input with dropdown suggestions and keyboard navigation. Supports custom option rendering, filtering, and various data formats.

Import

import { Autocomplete } from 'vuiii'

Basic Usage

View in Storybook

// Basic usage with string array
import { Autocomplete } from 'vuiii'

<Autocomplete v-model="search" :options="['Apple', 'Banana', 'Cherry']" />

More Examples

// With object options and extractors
const users = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
]

<Autocomplete
  v-model="search"
  :options="users"
  option-label="name"
  option-value="id"
  option-description="email"
  @select="(option) => selectedUser = option.data"
/>

// With custom filter function
const customFilter = (option, query) => {
  return option.label.startsWith(query)
}

<Autocomplete
  v-model="search"
  :options="options"
  :filter="customFilter"
/>

// With custom option rendering
<Autocomplete v-model="search" :options="users" option-label="name">
  <template #option="{ option, isHighlighted }">
    <div :class="{ highlighted: isHighlighted }">
      <strong>{{ option.label }}</strong>
      <small>{{ option.description }}</small>
    </div>
  </template>
</Autocomplete>

Storybook

For interactive examples with all variants, see Autocomplete in Storybook.