Autocomplete

Поле ввода с подсказками в выпадающем списке.

Использование​

Расширенная версия компонента TextField.

Добавилась возможность использования выпадающего списка с подсказками.
По умолчанию подсказки фильтруются вне зависимости от регистра. Но это можно изменить, прокинув свой callback filter.
Все пропсы, которые поддерживает компонент TextField также поддерживаются и здесь. Формат подсказок suggestions следующий:

type SuggestionItem = {
    /**
     * Метка-подпись к подсказке
     */
    label: string;
    /**
     * Слот для контента слева
     */
    contentLeft?: ReactNode;
    /**
     * Слот для контента справа
     */
    contentRight?: ReactNode;
};

Примеры​

Live Editor
Result
Open in CodeSandbox

Клавиатурная навигация​

Данный компонент соответствует требования W3C: Combobox.

  • Tab, Escape - закрывает Autocomplete. Перемещает фокус на следующий элемент на странице;
  • Enter - выбираем подсказку из списка;
  • Home - перемещает фокус на первый элемент;
  • End - перемещает фокус на последний элемент;
  • ArrowUp - перемещает фокус на один элемент выше;
  • ArrowDown - перемещает фокус на один элемент ниже;