Палитра команд
Условие
Модальный поиск по командам (как Cmd+K). Требования: · список команд приходит пропсом commands: [{ id, title }]; · <input class="q"> фильтрует по подстроке, регистр не важен; · результаты - <div class="cmd" data-id>, выделенный имеет класс "on"; · ↓ и ↑ двигают выделение по кругу, первый результат выделен сразу; · Enter выполняет выделенную: onRun(id); · при смене запроса выделение возвращается на первый результат; · пустой результат показывает <div class="none"> и Enter ничего не делает; · Escape вызывает onClose.
Что проверяют тесты
показывает все команды, первая выделена
фильтрует
стрелки по кругу
Enter выполняет выделенную
смена запроса возвращает выделение наверх
пустой результат
Escape закрывает
клик выполняет
Как подойти
Отличается от автодополнения тем, что первый элемент выделен сразу - палитрой пользуются вслепую, Enter должен срабатывать без стрелок. Отсюда индекс 0 по умолчанию и обязательный зажим: список меняется на каждый символ, и сохранённый индекс легко указывает в пустоту. Три состояния вместо четырёх: результаты выводятся, а не хранятся. Что назвать вслух: нечёткий поиск с подсветкой совпадений, недавние команды сверху, группировка по разделам, горячие клавиши рядом с названием, aria-combobox.
Подсказки: 3
- Выделение - индекс в отфильтрованном списке, его надо зажимать.
- Смена запроса сбрасывает индекс на ноль.
- На пустом списке клавиши не должны ничего делать.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.