Autocomplete

Takliflar dropdown i bilan input. Klaviatura navigatsiyasi bilan siz yozgan sari variantlarni filtrlaydi.

<script setup>
import { ref } from 'vue'

const value = ref('')
const options = ['Apple', 'Banana', 'Cherry', 'Date', 'Grape', 'Mango', 'Orange']
</script>

<template>
  <VxAutocomplete v-model="value" :options="options" placeholder="Mevalarni qidirish..." clearable />
</template>

Object Options

value va label maydonlari bilan obyektlarni uzating.

<script setup>
const countries = [
  { value: 'us', label: 'United States' },
  { value: 'gb', label: 'United Kingdom' },
  { value: 'de', label: 'Germany' },
]
</script>

<template>
  <VxAutocomplete v-model="value" :options="countries" placeholder="Davlatlarni qidirish..." />
</template>

Select Event

To'liq tanlangan elementni olish uchun @select ni tinglang.

<template>
  <VxAutocomplete v-model="value" :options="countries" @select="onSelect" />
</template>

Sizes

<template>
  <VxAutocomplete size="sm" placeholder="Kichik" />
  <VxAutocomplete placeholder="Standart" />
  <VxAutocomplete size="lg" placeholder="Katta" />
</template>

Disabled Options

<script setup>
const options = [
  { value: 'active', label: 'Active option' },
  { value: 'disabled', label: 'Disabled option', disabled: true },
]
</script>

<template>
  <VxAutocomplete :options="options" trigger-on-focus />
</template>

Trigger on Focus

Hatto yozmasdan ham input fokuslanganda barcha takliflarni ko'rsatish.

<template>
  <VxAutocomplete :options="options" trigger-on-focus placeholder="Hammasini ko'rish uchun bosing..." />
</template>

Remote / Async

Async ma'lumot olish uchun fetch-suggestions dan foydalaning. debounce bilan yaxshi mos keladi.

<script setup>
async function fetchUsers(query) {
  const res = await fetch(`/api/users?q=${query}`)
  return res.json()
}
</script>

<template>
  <VxAutocomplete :fetch-suggestions="fetchUsers" :debounce="300" placeholder="Foydalanuvchilarni qidirish..." />
</template>

Disabled

<template>
  <VxAutocomplete :options="options" disabled />
</template>

Custom Option Slot

<template>
  <VxAutocomplete :options="countries" trigger-on-focus>
    <template #option="{ item, highlight }">
      <span class="flag">{{ item.value.toUpperCase() }}</span>
      <span v-html="highlight(item.label)" />
    </template>
  </VxAutocomplete>
</template>

Props

Prop	Type	Default	Description
modelValue	string	''	Input qiymati (v-model)
options	string[] | AutocompleteOption[]	[]	Statik variantlar ro'yxati
placeholder	string	''	Placeholder matni
disabled	boolean	false	Input ni o'chirib qo'yish
clearable	boolean	false	Tozalash tugmasini ko'rsatish
size	'sm' | 'default' | 'lg'	'default'	Input o'lchami
debounce	number	0	Debounce kechikishi (ms da)
highlight	boolean	true	Mos kelgan matnni ajratib ko'rsatish
emptyText	string	'No results'	Mos keladiganlar bo'lmaganda matn
fetchSuggestions	(query: string) => Option[] | Promise<Option[]>	—	Async ma'lumot olish funksiyasi
triggerOnFocus	boolean	false	Fokuslanganda takliflarni ko'rsatish
valueKey	string	'value'	Variant obyektidan qiymat sifatida ishlatiladigan kalit

Events

Event	Type	Description
update:modelValue	(value: string) => void	Input qiymati o'zgardi
select	(item: AutocompleteOption) => void	Variant tanlandi
focus	(e: FocusEvent) => void	Input fokuslandi
blur	(e: FocusEvent) => void	Input fokusdan chiqdi
clear	() => void	Input tozalandi

Slots

Slot	Props	Description
option	{ item, index, highlight }	Maxsus variant renderlashi
prefix	—	Maxsus prefiks ikonkasi