Уточнить требования (источник данных, объём, задержка, мобильные, офлайн), затем: debounce ввода (~150–300 мс), отмена устаревших запросов (AbortController) и защита от гонок ответов, кэш результатов по запросу, минимальная длина запроса, клавиатурная навигация и ARIA (combobox, listbox, aria-activedescendant), подсветка совпадений, состояния загрузки, пустого результата и ошибки. Для больших списков — виртуализация.
А ещё Интервьюер ждёт обсуждения компромиссов: debounce против мгновенного отклика, кэш против свежести
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Компоненты:
sottoinnerHTML, виртуализация.Доступность:
role="combobox", aria-expanded, aria-controls;role="listbox", элементы role="option";aria-live.Крайние случаи: быстрый ввод и удаление, ответы не по порядку, медленная сеть, офлайн, длинные строки, мобильная клавиатура, IME для ввода иероглифов.
Производительность: без перерисовки всего списка на каждый символ, дешёвые обработчики ввода (INP).
sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.