Автодополнение поиска
Вопрос
Спроектируй поле поиска с подсказками. Каким будет контракт и что делать с гонками?
Веди разговор вслух, как на секции. Начинать с решения - главная ошибка: первые полторы минуты только вопросы.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
уточнил размер словаря, источник подсказок и требования к задержке
debounce на ввод и минимальная длина запроса
отмена предыдущего запроса через AbortController
защита от гонок: поздний ответ на старый запрос не должен затирать актуальный
кэш ответов по запросу, чтобы возврат к набранному был мгновенным
клавиатура: стрелки, Enter, Escape, aria-activedescendant
пустое состояние, состояние ошибки и «ничего не найдено» - три разных экрана
что показываем, пока грузится: скелетон или прошлый результат
Что могут спросить следом
- Что показывать во время загрузки - пусто, скелетон или прошлые результаты?
- Как сделать подсказки мгновенными при большом словаре?
- Нужен ли тут дебаунс, если бэкенд быстрый?
Разбор
Контракт простой (GET /suggest?q=), поэтому вся секция на самом деле про гонки
и отмену. Пользователь печатает «рек» - уходит три запроса, ответы приходят в произвольном
порядке, и результат по «ре» может прийти последним. Лечится отменой предыдущего запроса
или пометкой устаревших.
Дальше - частота: debounce 250–300 мс и минимум два-три символа, иначе бьём по бэкенду на каждое нажатие.
Кэш по строке запроса даёт мгновенный отклик при стирании символа - пользователь возвращается к тому, что уже видел.
Отдельный блок, который отличает сильного кандидата, - клавиатура и доступность:
роль combobox, стрелки, Enter, Escape, aria-activedescendant на активном пункте.
Автодополнение без клавиатуры - половина функциональности.
И три разных пустых состояния: ещё не вводил, грузится, ничего не нашлось.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.