Автозаполнение всплывающего окна для textarea - PullRequest
2 голосов
/ 08 октября 2011

Я пытаюсь создать функцию автозаполнения имени пользователя в моем веб-приложении, поэтому, когда вы набираете символ @, появляется небольшое всплывающее окно со стрелкой, указывающее на ваш знак @, и оно фильтруется, когда вы продолжаете вводить имя пользователя ( и нажатие завершает его).

Я могу сделать большую часть этого, однако основная часть, с которой я борюсь, - это получить некоторые координаты по x и y, которые я могу использовать для позиционирования поповера ...

Для справки вот скрипка JSFiddle, над которой я работаю .. http://jsfiddle.net/tarnfeld/Xefdb/3/

Чтобы основные функции работали, у меня есть маленький красный промежуток, который я хотел бы переместить в положение каретки (маленький | символ как ваше печатание), чтобы я мог еще больше расширить его, чтобы это была потрясающая любовь к автозаполнению.

Любая помощь будет оценена :)

Спасибо !!

PS: я нашел ответы вроде этого автозаполнение в стиле Twitter в textarea , но они не появляются в позиции @ char ...

Ответы [ 2 ]

1 голос
/ 08 октября 2011

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

Я нашел следующие ссылки, которые могут вам помочь:

Расчет позиции х / у - сложная часть.Оба решения (вторая и третья ссылки) создают временные элементы (<div> или <textarea>) и последовательно заполняют их текстом, вычисляя их высоту / ширину.

HTH.

0 голосов
/ 08 октября 2011

WooHoo!

Итак, после некоторого прочтения и взлома у меня все получилось .. Вы можете посмотреть здесь (пожалуйста, прочитайте сообщение вверху!) http://jsfiddle.net/Xefdb/9/

Я еще не пробовал это в IE, так что, если кто-то мог, и если он не работает должным образом, пришлите мне скриншот @tarnfeld, который был бы потрясающим.

Вот краткое введение в то, как это работает:

  • Получить позицию каретки
  • Дублируйте редактируемую оболочку и поместите ее в то же место, что и настоящая редактируемая оболочка
  • Обернуть символ, который вы только что написали, в промежуток
  • Используйте jQuery, чтобы получить абсолютную позицию пролётов
  • Удалить дубликат обертки
  • Поместите элемент, который вы хотите отслеживать каретку, в x / y промежутка, который вы только что отработали.

Если кто-нибудь может найти лучший способ сделать это, пожалуйста, дайте мне знать!

PS. Надо иметь дело и с прокруткой!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...