Auto Complete Extender для многострочного текстового поля — стиль Facebook

Каждая строка представляет собой отдельный фрагмент данных, который имеет значение.

Почему тогда вы используете текстовое поле, а не несколько полей <input>?

Мне кажется, что ваша ошибка в дизайне пользовательского интерфейса уже лежит здесь, поэтому остальная часть моего ответа скорее теоретическая; Я, вероятно, не буду вдаваться в подробности, поскольку разумное решение вашей проблемы приведено выше.

во-первых, можно использовать расширитель автозаполнения только для части текста в текстовом поле,

Почему этого не должно быть? Положение курсора в текстовой области, например, читаемо (хотя это требует некоторой работы над кросс-браузерными проблемами).

и во-вторых, работает ли это так для нескольких строк (т.е. один раз - в каждой строке)?

Пока разрывы строк являются «жесткими» (созданными самим пользователем с помощью ввода/возврата), разделение фактического содержимого текстовой области на "\n", чтобы каждая строка представляла собой одно значение, не является проблемой.

Что касается его положения, я думаю, у меня нет другого выбора, кроме как в нижней части текстового поля, на которое он ссылается, несмотря на то, что мне бы хотелось, чтобы он отображался под символом @.

Вы можете попытаться приблизительно измерить положение @ по номеру строки и столбца, на котором он находится, и сопоставить это с шириной символа и высотой строки при использовании моноширинного шрифта. Для других шрифтов может потребоваться дополнительная «магия» для измерения фактической ширины предыдущего текста перед символом @.

Для этого я создал пакет Meteor, который поддерживает как свободный текст, так и несколько источников автозаполнения. Модель данных Meteor позволяет выполнять быстрый поиск по нескольким правилам с помощью настраиваемых списков. Если вы не используете Meteor для своего веб-приложения (я полагаю), вы, к сожалению, не найдете ничего такого замечательного для автозаполнения.

https://github.com/mizzao/meteor-autocomplete

По ссылке вы можете увидеть фотографии того, как это работает. Форкайте, тяните и улучшайте!