Спроектируй автодополнение поиска
Вопрос
Спроектируй компонент поиска с подсказками для маркетплейса: подсказки при вводе, история запросов, переход по стрелкам. Пройди этапы: требования, оценка нагрузки, API, данные, компоненты, узкие места.
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Требования: подсказки, история, клавиатура, мобильные, доступность (ARIA combobox), переиспользуемость компонента
Оценка: каждое нажатие клавиши = потенциальный запрос, нужен дебаунс 200-300 мс и минимальная длина
API: GET /suggest?q=...&limit=10, ответ с типами подсказок (запрос, категория, товар)
Данные: кеш ответов по префиксу в памяти, история в localStorage, выделенный индекс в локальном состоянии
Компоненты: SearchInput, SuggestionList, SuggestionItem; контролируемый ввод, обработка клавиш
Узкие места: гонки ответов (AbortController), подсветка совпадений без XSS, фокус и закрытие по Esc, пустые и ошибочные состояния
Что могут спросить следом
- Как сделать компонент доступным для скринридера?
- Где хранить кеш и сколько?
- Как работать без сети?
Разбор
Требования: при вводе показываем до 10 подсказок, при пустом поле историю запросов, навигация стрелками, Enter выбирает, Esc закрывает, всё работает с клавиатуры и со скринридером. Оценка: если слать запрос на каждую клавишу, это несколько запросов в секунду на пользователя, поэтому дебаунс около 250 мс и минимум 2 символа. API: GET /suggest с q и limit, ответ со списком и типом подсказки. Данные: кеш по строке запроса в памяти с ограничением размера, история в localStorage, активный индекс в локальном состоянии. Компоненты: поле ввода с role combobox, aria-expanded и aria-activedescendant, список с role listbox. Узкие места: гонки ответов решаю отменой через AbortController, подсветку совпадений делаю разбиением строки, а не через innerHTML, чтобы не было XSS, показываю состояния загрузки и ошибки, на мобильных учитываю экранную клавиатуру.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.