自動完成彈出文本區域

Question

我想在我的web應用程序中建立一個用戶名自動完成功能，所以當你鍵入@符號時，帶箭頭的小彈出窗口出現在你的@符號處，並且在繼續輸入用戶名並點擊完成它）。

我可以做這個最，但我有越來越X和Y，我可以用它來定位酥料餅的一些座標掙扎的主要部分...

僅供參考這裏是一個的jsfiddle我撥弄我正在努力.. http://jsfiddle.net/tarnfeld/Xefdb/3/

爲了使主要功能正常工作，我有一點紅色的範圍，我想移動到插入位置（小鍵符號作爲您的輸入），所以我可以進一步將其擴展爲真棒自動完成的愛。

任何幫助，將不勝感激:)

謝謝！

PS：我發現這樣Twitter-style autocomplete in textarea答案，但他們沒有在@字符位置下方彈出...

Answer 1

這似乎是相當複雜的。基本上，你必須獲得當前字符的位置並將其轉換爲X/Y座標。

我發現下面的鏈接它可能會幫助您：

• Caret position in textarea, in characters from the start
• Display DIV at Cursor Position in Textarea
• http://kirblog.idetalk.com/2010/03/calculating-cursor-position-in-textarea.html

計算x/y位置是棘手的部分。這兩種解決方案（第二和第三個鏈接）都會創建臨時元素（<div>或<textarea>），並用計算其高度/寬度的文本連續填充它們。

HTH。

Answer 2

WooHoo！

因此，具有一定的閱讀和黑客攻擊我得到這個工作..你可以在這裏看看（請在頂部閱讀郵件！）http://jsfiddle.net/Xefdb/9/

我沒有帶還沒有嘗試在IE瀏覽器，如果任何人可以，如果它不能正常工作，給我一個截圖@tarnfeld，這將是真棒。

這裏有一個快速的介紹它是如何工作的：

• 獲取插入位置
• 複製可編輯的包裝，並將其放置在同一個地方真正的可編輯的包裝
• 總結你的角色只是在跨度
• 使用jQuery獲得跨度絕對位置
• 刪除重複的包裝
• 寫道：將您希望跟蹤插入符號的元素定位在您剛制定的跨度的x/y處。

如果有人能找到一個更好的方法來做到這一點，請讓我知道！

PS。它也應該處理滾動！