Поиск с подсказками
Вопрос
Как бы ты сделал поле поиска с подсказками, которые подгружаются с сервера по мере ввода?
Попробуйте сами
Ответьте вслух за 2 минуты, как на собесе. Потом сверьтесь с тезисами: что прозвучало, а что нет.
Показать ответ и разбор
Коротко
Что должно прозвучать в ответе
Слушать событие input, а не keyup
Debounce 200-300 мс, чтобы не слать запрос на каждую букву
Отменять предыдущий запрос через AbortController, чтобы старый ответ не перетёр новый
Минимальная длина запроса и кеш ответов
Состояния загрузки, пустого результата и ошибки
Клавиатура и доступность: стрелки, Enter, Esc, роли combobox и listbox
Что могут спросить следом
- Чем debounce отличается от throttle и что здесь уместнее?
- Что будет без отмены запросов при медленной сети?
- Как подсветить совпадение в подсказке без XSS?
Разбор
Слушаю событие input, потому что оно срабатывает и на вставку, и на автозаполнение. Оборачиваю обработчик в debounce на 200-300 мс, чтобы запрос уходил, когда пользователь сделал паузу. Каждый новый запрос отменяет предыдущий через AbortController: иначе при медленной сети ответ на «ко» может прийти позже ответа на «кот» и перетереть его. Ставлю минимальную длину строки и кеширую ответы по запросу. Показываю загрузку, пустой результат и ошибку. Подсказки рендерю через textContent, подсветку совпадения собираю из узлов, а не строкой HTML. Для клавиатуры поддерживаю стрелки, Enter и Esc, а для скринридеров разметку по паттерну combobox с aria-expanded и aria-activedescendant.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.