Autocomplete
Поле ввода с подсказками в выпадающем списке.
Использование
Расширенная версия компонента TextField.
Добавилась возможность использования выпадающего списка с подсказками.
По умолчанию подсказки фильтруются вне зависимости от регистра. Но это можно изменить, прокинув свой callback filter.
Все пропсы, которые поддерживает компонент TextField также поддерживаются и здесь.
Формат подсказок suggestions следующий:
type SuggestionItem = {
/**
* Метка-подпись к подсказке
*/
label: string;
/**
* Слот для контента слева
*/
contentLeft?: ReactNode;
/**
* Слот для контента справа
*/
contentRight?: ReactNode;
};
Примеры
- Default
- Controlled
- Infinite Loading
- Custom Filter
- Empty State
- Virtual
- Render item
- Clear input
Это пример с бесконечным loading подсказок в списке. Для удобства порог для открытия списка подсказок понижен до 0 (открываться будет сразу при фокусе).
Пример custom фильтрации на backend. Не забываем отключить дефолтную фильтрацию.
Если произошла ошибка, или же к примеру нужно показать некую информацию пользователю, то для этой цели можно использовать компонент EmptyState.
Свойство virtual позволяет виртуализировать выпадающий список. Для настройки высоты списка можно использовать свойство listMaxHeight.
Пропс renderItem для кастомной настройки элемента в выпадающем списке. Принимает коллбэк с одним параметром: item.
В примере использован другой наш компонент - Cell.
Клавиатурная навигация
Данный компонент соответствует требования W3C: Combobox.
Tab, Escape- закрывает Autocomplete. Перемещает фокус на следующий элемент на странице;Enter- выбираем подсказку из списка;Home- перемещает фокус на первый элемент;End- перемещает фокус на последний элемент;ArrowUp- перемещает фокус на один элемент выше;ArrowDown- перемещает фокус на один элемент ниже;