Мобильная версияЯ пытаюсь создать пользовательский интерфейс «вложенного значка» для панели поиска, которую пытаюсь создать. Идея состоит в том, что когда пользователь выбирает опцию из раскрывающегося списка, она добавляется к вводу выбора в качестве значка. Затем пользователь может начать печатать, но ввод должен находиться внутри значка. По мере того, как пользователь вводит текст, отображаются раскрывающиеся параметры, которые пользователь может выбрать, и они отображаются в виде значков внутри родительского значка. Вот диаграмма, демонстрирующая то, чего я пытаюсь достичь -
[*]Пользователь начинает вводить поле выбора/автозаполнения. Опции появляются по мере их ввода. Например. Пользователь вводит "fr".
[*]При выборе параметра («Франция») этот параметр добавляется в виде значка внутри ввода поиска, а курсор помещается внутри значка.
[*]Когда пользователь начинает вводить внутри значка, автозаполнение показывает параметры, если они есть. (Например, пользователь вводит «па»)
[*]При выборе параметра он добавляется в виде значка внутри родительского значка. Курсор остается внутри родительского значка.
[*]Повторно вводит и выбирает тег, пока пользователь вручную не нажмет «tab» или не щелкнет снаружи при вводе выбора.
Нажатие клавиши Backspace за пределами родительского тега должно удалить весь значок. Нажатие клавиши Backspace внутри родительского значка удаляет дочерний значок.
Вопрос: существует ли какая-либо существующая библиотека, которая делает это с использованием HTML, CSS, JS, React и т. д.? Или у этого элемента пользовательского интерфейса есть определенное имя? Кто-нибудь где-нибудь видел такое взаимодействие?
Самое близкое, что я смог найти, это https://yaireo.github.io/tagify/, но оно не полностью удовлетворяет этому варианту использования.
Любые советы будут очень полезны! Спасибо!
