Auto Complete

Компонент AutoComplete в Naive UI предоставляет функционал автодополнения для ввода текста. Он позволяет пользователю получать подсказки на основе введённого значения и выбирать их из предложенного списка. Для начала необходимо импортировать компонент и подключить его в шаблоне:

import { NAutoComplete } from 'naive-ui'

export default {
  components: {
    NAutoComplete
  },
  setup() {
    const options = [
      { label: 'JavaScript', value: 'js' },
      { label: 'TypeScript', value: 'ts' },
      { label: 'Vue.js', value: 'vue' },
      { label: 'React', value: 'react' }
    ]
    return { options }
  }
}

В шаблоне компонент используется следующим образом:

<n-auto-complete
  v-model:value="selected"
  :options="options"
  placeholder="Выберите язык"
/>

Здесь v-model:value связывает выбранное значение с переменной selected, а options задаёт список предложений.

Динамическая фильтрация

Для реализации динамической фильтрации подсказок используется свойство filter. Оно принимает функцию, которая проверяет, подходит ли конкретный вариант под введённое значение:

const filterOptions = (pattern, option) => {
  return option.label.toLowerCase().includes(pattern.toLowerCase())
}
<n-auto-complete
  v-model:value="selected"
  :options="options"
  :filter="filterOptions"
  placeholder="Начните ввод"
/>

С помощью такой функции можно контролировать логику поиска, например, игнорировать регистр или использовать более сложные алгоритмы сопоставления.

Асинхронные данные

AutoComplete позволяет работать с удалёнными источниками данных. Для этого используется событие on-update:value, которое срабатывает при изменении ввода, и обновление списка options через реактивную переменную:

import { ref, watch } from 'vue'

const query = ref('')
const options = ref([])

watch(query, async (newValue) => {
  if (!newValue) {
    options.value = []
    return
  }
  const response = await fetch(`https://api.example.com/search?q=${newValue}`)
  const data = await response.json()
  options.value = data.map(item => ({ label: item.name, value: item.id }))
})
<n-auto-complete
  v-model:value="query"
  :options="options"
  placeholder="Поиск"
/>

Такой подход позволяет реализовать автодополнение с серверной фильтрацией и подгрузкой данных по мере ввода.

Настройка отображения опций

С помощью слота label можно кастомизировать отображение каждой подсказки:

<n-auto-complete v-model:value="selected" :options="options">
  <template #label="{ option }">
    <strong>{{ option.label }}</strong> — {{ option.value }}
  </template>
</n-auto-complete>

Также можно использовать слот option для полной кастомизации элемента списка, включая добавление иконок или дополнительной информации.

Управление поведением списка

Свойства компонента позволяют тонко настраивать поведение выпадающего списка:

  • show-option-slot — отображение кастомного слота опции.
  • placement — позиционирование выпадающего списка (top-start, bottom-end и т.д.).
  • max-height — ограничение высоты списка с возможностью прокрутки.
  • virtual-scroll — включение виртуального скролла для больших массивов данных.
<n-auto-complete
  v-model:value="selected"
  :options="options"
  placement="bottom-start"
  :max-height="200"
  :virtual-scroll="true"
/>

Использование виртуального скролла существенно повышает производительность при работе с тысячами элементов.

Клавиатурная навигация и события

AutoComplete поддерживает полноценную навигацию с клавиатуры: стрелки вверх/вниз для выбора и Enter для подтверждения. Дополнительно доступны события:

  • on-select — срабатывает при выборе опции.
  • on-focus / on-blur — обработка фокуса и потери фокуса.
  • on-search — вызов при каждом изменении значения.
const handleSelect = (option) => {
  console.log('Выбрана опция:', option)
}
<n-auto-complete
  v-model:value="selected"
  :options="options"
  @on-select="handleSelect"
/>

Работа с объектами и сложными структурами

Если список опций содержит сложные объекты, нужно явно указать поля для отображения и значения:

const options = [
  { id: 1, name: 'JavaScript', category: 'frontend' },
  { id: 2, name: 'Node.js', category: 'backend' }
]
<n-auto-complete
  v-model:value="selected"
  :options="options"
  label-key="name"
  value-key="id"
/>

Свойства label-key и value-key позволяют использовать любые поля объектов для отображения и хранения значения.

Интеграция с формами

AutoComplete полностью совместим с Naive UI Form. Можно использовать его как валидируемое поле формы:

<n-form>
  <n-form-item label="Язык" path="language" :rule="{ required: true, message: 'Выберите язык' }">
    <n-auto-complete v-model:value="selected" :options="options" />
  </n-form-item>
</n-form>

Валидация срабатывает при попытке отправки формы, и пользователю показываются сообщения об ошибках.

Этот подход делает AutoComplete в Naive UI мощным инструментом для создания интерфейсов с динамическим поиском, фильтрацией и кастомизацией списка подсказок, обеспечивая гибкость как для простых, так и для сложных сценариев.

Оглавление