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