Как выполнить частичное автозаполнение с фильтрацией, предоставляемое сервером, в большом элементе <input> или <textarea ⇐ Html

[Anonymous]

Я реализую веб-приложение для ввода данных с многострочным элементом , где мои пользователи вводят текст на естественных языках в формате уценки. Я разработал расширение уценки, чтобы пользователи могли ссылаться на объекты в специальной нотации, например [[org:42]], где 42 — это идентификатор базы данных объекта.
Я хотел бы иметь простое автозаполнение, где пользователи могут вводить [[Kevin в любом месте элемента textarea (т. е. не всегда в самой правой позиции) и иметь возможность выбрать один из все существующие объекты, содержащие подстроку Kevin , в идеале без использования мыши. К сожалению, замена обновленного поля textarea, которое я получаю с сервера, приведет к нарушению позиции курсора, что неприемлемо.
Каковы мои варианты достижения желаемого пользовательского интерфейса? Я рассмотрел

• создание отдельного элемента списка данных, где пользователи могли бы завершить свою незамкнутую escape-последовательность [[] своим выбором. Требуется движение мыши (поскольку табуляция не должна выходить за пределы элемента textarea).
• много уродливого пользовательского JavaScript для этого элемента textarea.

Я не занимаюсь фронтенд-работой профессионально. Я упускаю что-то очевидное?
Справочная информация: я провожу кампанию DnD, и количество NPC выросло до такой степени, что ими больше невозможно управлять с помощью текстовых файлов. И я, и моя группа хотим тратить как можно меньше времени на ведение заметок, поэтому нам хотелось бы иметь автозаполнение в свободном текстовом поле для персонажей, организаций и объектов.

Подробнее здесь: https://stackoverflow.com/questions/798 ... g-input-or