Текстареа так-то глобальный элемент, но там она была представлена без скроллбаров. Тут со скроллбарами.
Мы используем кастомный плагин (дока), который не умеет вгрызаться внутрь textarea. Он сбрасывает с нее все стили, а класс, который был у нее ранее вешает на оберточный div. Все бы ничего, но состояние :focus на диве не работает. Надо делать его ручками. По фокусу в .input__text идем на уровень .input`а и там проставляем класс .input_focus. Делаем это для всех инпутов во всех вариация. Ниже этот модификатор снова будет использоваться для других задах.
Тут надо подружить два плагина. Просто так они не работают друг с другом. Плагин для разуплотнения textarea работает, а вот скроллбар тупит. Видимо его надо как-то перезапускать.
Функционал самой выпадайки - это .input__dropdown. Именно этот слой скрывается/показывается. Внутри пара оберток со скроллбаром и, непосредственно, сам лист опций.
Скрытие/показ завязаны на модификатор .input_drop - проставляем его в нужный момент. В этой демке он проставляется если введено больше одного символа.
.input__option_highlight можно проставлять опциям внутри выпадайки для управления с клавиатуры, он повторяет эффекты наведения.
Выпадайку надо ограничивать по высоте. Точнее контейнер для опций внутри выпадайки .input__suggest. По дефолту в CSS проставлен max-height: 200px; с расчетом на пять айтемов. Этот max-height организует скроллбар.
В этой демке кастомные скроллбары не работают. Там всю инициализацию и обсчеты надо делать только в момент показа выпадахи, а в temp.js это делается по document.ready.
При выборе опции нужно не просто проставлять ее в .input__text, нужно еше и проскроллировать этот инпут влево до упора. Иначе будет видно только хвост введенного. Это на случай длинных текстов, которые не помещаются целиком в .input__text.
Как-то магически тут скроллбар инициализируется сам собой, даже если выпадайка скрыта. Но из-за него выпадайка открыватся с небольшой задержкой при первом ее открытии.
При открытии одной выпадашки, другая обязана закрываться. Одновременно не может быть открыто несколько выпадашек.
Это все тот же самый инпут с выпадайкой. Функционал один и тот же. Нет смысла создавать новый виджет. Из нового тут:
Когда ищем игру не выбрав платформу. В этом случае платформы добавляются как часть текста. Технически это новый блок .platform, а не часть инпута, но я поленился и не стал новый файл с документацией создавать :)
Тут модификатор .input_split у всех вагончиков. Больше ничего нового. Просто пачка виджетов идет друг за другом.
Снова используется модификатор .input_focus. На него матчимся из CSS и вытягиваем его z-index наверх, чтобы белые бордюры текущего были поверх соседей.
Задержка выпадайки при использовании кастомного скроллбара.