Практика 15

ComboBox

Поле ввода со списком подсказок

Поведение компонента

1. В неактивном виде выглядит как обычный input

2. По фокусу на инпут, под ним отображается выпадающий список с возможными значениями

3. При вводе текста происходит фильтрация

4. Клик по значению из списка, устанавливает значение в инпут и скрывает выпадающий список

5. При фокусе на компоненте с заполненным значением, выпадающий список отображается без фильтрации

6. Необходимо показать неактивный элемент с текстом "не найдено", если нет подходящих значений

7. При потере фокуса, компонент скрывает выпадающий список

8. Выбирать элемент и списка можно при помощи клавиш "вверх", "вниз" и "enter"

Выполнение

1. Клонируйте репозиторий https://bitbucket.org/frontschoolnsk/lesson15/src/master/
2. Установите зависимости командой npm install
3. Запустите сервер командой npm start
4. Страница с формой доступна по адресу http://localhost:3000/
5. Верстку компонента можно взять со страницы примера http://localhost:3000/example.html
6. Следуя подсказкам и задачам из readme.md, реализуйте компонент ComboBox.