Autocomplete

Autocomplete component based on Headless UI Combobox. Support multiple selection.

Usage

Use <VAutocomplete /> component to create autocomplete input.

View Code

<script setup lang="ts">
const items = ref([
  { value: 1, text: "Wade Cooper" },
  { value: 2, text: "Arlene Mccoy" },
  { value: 3, text: "Devon Webb" },
  { value: 4, text: "Tom Cook" },
  { value: 5, text: "Tanya Fox" },
  { value: 6, text: "Hellen Schmidt" },
]);

const selected = ref();
</script>

<template>
  <VAutocomplete
    v-model="selected"
    placeholder="Choose..."
    :items="items"
  />
</template>

Multiple

Use multiple prop to enable multiple selection to the autocomplete component.

View Code

<script setup lang="ts">
const items = ref([
  { value: 1, text: "Wade Cooper" },
  { value: 2, text: "Arlene Mccoy" },
  { value: 3, text: "Devon Webb" },
  { value: 4, text: "Tom Cook" },
  { value: 5, text: "Tanya Fox" },
  { value: 6, text: "Hellen Schmidt" },
]);

const selected = ref();
</script>

<template>
  <VAutocomplete
    v-model="selected"
    placeholder="Choose..."
    :items="items"
    multiple
  />
</template>

Props

Prop	Type	Default Value
`modelValue`	`Item \| Item[] \| undefined \| null`	`undefined`
`multiple`	`string`	`false`
`placeholder`	`string`	`''`
`items`	`string`	`[]`
`itemText`	`string`	`'text'`
`itemValue`	`string`	`'value'`

Events

Name	Payload	Description
`update:modelValue`	`{value: ModelValue \| ModelValue[]}`	Triggered when `modelValue` prop changed

Types

interface Item extends Record<string, any> {
  value: string | number
  text: string
}

type ModelValue = Item | Item[] | undefined | null