AutoComplete

AutoComplete — это компонент, позволяющий создавать поле ввода с автоматическим завершением, предлагая пользователю варианты на основе введённого текста. Он идеально подходит для поиска, фильтрации и ввода данных с заранее известными значениями. Компонент построен на базе Input и поддерживает все его свойства, расширяя их функционалом автоподстановки.

import { AutoComplete } from 'antd';
import React, { useState } from 'react';

const options = [
  { value: 'Apple' },
  { value: 'Banana' },
  { value: 'Cherry' }
];

const Demo = () => {
  const [value, setValue] = useState('');

  return (
    <AutoComplete
      options={options}
      style={{ width: 200 }}
      value={value}
      onCha nge={setValue}
      placeholder="Введите фрукт"
    />
  );
};

В этом примере options задаёт массив объектов с ключом value, который отображается в выпадающем списке при вводе текста.

Управление состоянием и фильтрация

Компонент поддерживает контролируемый и неконтролируемый режимы. Контролируемый режим позволяет полностью управлять значением через value и onChange.

const [value, setValue] = useState('');
const handleSearch = (searchText) => {
  const filteredOptions = fruits
    .filter(fruit => fruit.toLowerCase().includes(searchText.toLowerCase()))
    .map(fruit => ({ value: fruit }));
  setOptions(filteredOptions);
};

handleSearch вызывается при каждом изменении текста в поле и обновляет список вариантов в соответствии с введённым значением. Это особенно полезно при работе с большими данными или API-запросами.

Поддержка асинхронных данных

AutoComplete легко интегрируется с асинхронными источниками данных. Например, поиск через API:

import { AutoComplete } from 'antd';
import React, { useState } from 'react';

const AsyncDemo = () => {
  const [options, setOptions] = useState([]);

  const fetchSuggestions = async (query) => {
    const response = await fetch(`https://api.example.com/search?q=${query}`);
    const data = await response.json();
    setOptions(data.map(item => ({ value: item.name })));
  };

  return (
    <AutoComplete
      style={{ width: 300 }}
      onSea rch={fetchSuggestions}
      options={options}
      placeholder="Поиск..."
    />
  );
};

onSearch вызывается при каждом вводе, что позволяет подгружать данные динамически и уменьшать нагрузку на клиент.

Кастомизация отображения вариантов

Компонент поддерживает использование React-элементов для отображения сложных вариантов. Можно использовать label и value или напрямую передавать JSX:

const customOptions = [
  { value: '1', label: <div style={{ color: 'red' }}>Яблоко</div> },
  { value: '2', label: <div style={{ fontWeight: 'bold' }}>Банан</div> }
];

<AutoComplete
  options={customOptions}
  placeholder="Выберите фрукт"
/>

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

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

AutoComplete полностью совместим с компонентом Form.Item, что позволяет использовать его внутри форм с валидацией:

import { Form, AutoComplete, Button } from 'antd';

<Form onFin ish={handleSubmit}>
  <Form.Item
    name="fruit"
    label="Фрукт"
    rules={[{ required: true, message: 'Пожалуйста, выберите фрукт!' }]}
  >
    <AutoComplete options={options} placeholder="Выберите фрукт" />
  </Form.Item>
  <Form.Item>
    <Button type="primary" htmlType="submit">Отправить</Button>
  </Form.Item>
</Form>

Валидация срабатывает при отправке формы, а значение AutoComplete передаётся вместе с остальными полями.

Настройка поведения выпадающего списка

  • dropdownMatchSelectWidth — управляет шириной выпадающего списка относительно поля ввода.
  • open / defaultOpen — контроль открытия и закрытия списка.
  • onSelect — событие выбора варианта из списка.
<AutoComplete
  options={options}
  style={{ width: 200 }}
  onSel ect={(value) => console.log('Выбран:', value)}
  dropdownMatchSelectWidth={false}
/>

onSelect позволяет реагировать на выбор пользователя и выполнять дополнительные действия, например, загрузку данных для выбранного элемента.

Использование с тегами (tags mode)

AutoComplete поддерживает режим tags, позволяющий вводить несколько значений:

<AutoComplete
  mode="tags"
  style={{ width: '100%' }}
  options={options}
  placeholder="Введите фрукты"
/>

Каждое введённое значение превращается в отдельный тег, а список вариантов фильтруется автоматически.

Рекомендации по производительности

  • Для больших массивов использовать ленивую фильтрацию через onSearch вместо передачи всего списка в options.
  • При работе с асинхронными данными использовать дебаунсинг на ввод, чтобы уменьшить количество запросов к API.
  • Использовать ключи в сложных JSX-опциях для оптимизации ререндеринга.

Полезные свойства AutoComplete

Свойство Описание
options Массив объектов для отображения в списке
value Контролируемое значение поля
onChange Обработчик изменения текста
onSelect Обработчик выбора варианта
onSearch Событие поиска, полезно для асинхронных данных
placeholder Текст-подсказка в поле ввода
dropdownMatchSelectWidth Ширина выпадающего списка относительно поля

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

Оглавление