Управляемый ввод со списком подсказок

Компонент автодополнения состоит из двух основных частей: управляемого текстового поля ввода и раскрывающегося списка подсказок. Поле ввода располагается в обычном потоке документа, а список подсказок позиционируется абсолютно непосредственно под ним. Вместе они работают как единый интерактивный элемент, хотя являются отдельными элементами DOM.

Вам понадобятся четыре переменные состояния: inputValue (строка — введенный текст), suggestions (массив — текущие совпадающие элементы), isOpen (логическое значение — виден ли раскрывающийся список) и selectedIndex (число — какая подсказка выделена для навигации с клавиатуры; начальное значение — -1, если ничего не выбрано).

Сделайте поле ввода полностью управляемым: value={inputValue} и onChange={e => setInputValue(e.target.value)}. Это дает React полный контроль над отображаемым текстом. Каждое нажатие клавиши обновляет состояние, что запускает повторную отрисовку с новым значением. Никогда не используйте неуправляемое поле ввода для автодополнения — необходимо программно считывать и задавать его значение.

Если подсказки поступают из локального массива, фильтруйте его при каждой отрисовке на основе inputValue: сравнивайте каждый элемент с помощью item.toLowerCase().includes(inputValue.toLowerCase()). Если список большой, вычислять результат можно с помощью useMemo, чтобы не выполнять вычисление при каждой повторной отрисовке. Для небольших списков достаточно фильтровать непосредственно при отрисовке.

Открывайте раскрывающийся список, когда inputValue.length > 0 и suggestions.length > 0. Закрывайте его при потере фокуса полем ввода (с небольшой задержкой, чтобы нажатие подсказки успело зарегистрироваться), после выбора подсказки или при нажатии клавиши выхода. Устанавливайте isOpen соответствующим образом, чтобы управлять условным отображением.

Событие onBlur срабатывает, когда поле ввода теряет фокус, например когда пользователь нажимает подсказку. Если закрыть раскрывающийся список сразу при потере фокуса, нажатие подсказки не зарегистрируется, поскольку список исчезнет до срабатывания события нажатия. Используйте setTimeout(() => setIsOpen(false), 150), чтобы дать нажатию время зарегистрироваться.

Задайте для раскрывающегося списка position: absolute, чтобы он накладывался на содержимое под полем ввода, а не сдвигал его вниз. Установите высокий z-index (100+), чтобы список отображался поверх другого содержимого. Задайте max-height вместе с overflow-y: auto, чтобы список не становился слишком высоким при большом количестве результатов.

У каждого элемента подсказки должен быть обработчик нажатия: onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. Он устанавливает в поле ввода выбранную подсказку и закрывает раскрывающийся список. Выбор происходит мгновенно и естественно, как и ожидают пользователи от полей автодополнения.

Альтернатива задержке при потере фокуса — использовать onMouseDown={e => e.preventDefault()} для каждого элемента подсказки. Это не позволяет событию нажатия кнопки мыши забрать фокус у поля ввода, поэтому при нажатии подсказки событие потери фокуса не срабатывает. Поле ввода сохраняет фокус, а обработчик нажатия срабатывает корректно.

Хорошее автодополнение должно поддерживать навигацию с клавиатуры. Пользователь должен иметь возможность нажать ArrowDown, чтобы выделить первую подсказку, продолжать нажимать эту клавишу для перемещения вниз по списку, нажать клавишу ввода для выбора и клавишу выхода для закрытия без выбора. Это реализуется обработкой onKeyDown на элементе ввода.

Каждый раз, когда пользователь вводит текст и изменяется inputValue, сбрасывайте selectedIndex в -1. Это удаляет предыдущий выбор с клавиатуры, поэтому новый набор отфильтрованных подсказок начинается без выделения. Устаревший индекс выбора, указывающий после изменения списка на другой элемент, сбивает с толку и приводит к неверному результату.

Почему для элементов подсказок следует использовать onMouseDown с e.preventDefault(), а не полагаться на задержку при потере фокуса?

Компонент автодополнения требует четырех переменных состояния: inputValue, подсказки, isOpen и selectedIndex. Используйте управляемое поле ввода, фильтруйте подсказки на основе введенного значения и управляйте видимостью раскрывающегося списка через isOpen. Устраняйте состояние гонки между потерей фокуса и нажатием либо с помощью таймера, либо с помощью onMouseDown и preventDefault. Сбрасывайте selectedIndex при каждом изменении поля ввода.