2011-08-29 49 views
3

我已經看到如何在一個textarea中有多個autocompletes,但我想要的是有東西,可以選擇一個術語在textarea,或更確切地說,無論在哪裏光標位於textarea中。我所見過的大多數解決方案只有在用戶正在處理輸入字符串的末尾時纔有效。我希望能夠以字符串開始: 「@George踩着#foot。」 然後回到字符串的中間並開始輸入以將其更改爲: 「@George踩@ Fredrick's #foot。根據@Mary」 並且@Fredrick和@Mary分別顯示爲自動完成選項。自動完成中間的一個textarea選擇器javascript jquery

對於特定用途我希望使用此功能時,自動完成將發生在以「@」或「#」符號開頭的字符串上,但它們不一定是給定符號的第一個或最後一個。

我正在使用javascript和jquery-ui完成此任務。這適用於移動設備,因此自動完成的位置將始終位於文本區域的底部。

回答

0

我實際上實現了一些非常相似的東西。我查看了Google+,他們使用Chrome的contenteditable和Firefox的一些iframe混合。

我用rangy獲得了當前選擇的成功。

事情我還沒有解決:

  • 用戶開始輸入@或#如果正確檢測,這是難度比它看起來,特別是如果你注入在輸入區 HTML。
  • 獲取當前選區的x,y位置,以便定位自動完成建議。據說rangy已經可以做到了,但它還沒有正式發佈(有一個working demo though)。
+0

我是Rangy的作者。有人真的想要使用選擇/範圍的像素位置肯定有助於集中精力完成它:)我想我需要讓人們更容易要求或註冊新功能,否則我不確定我正在努力的價值。 –

0

我發現我可以做幾乎每一件事,我想通過textarea.selectionStart值,然後騎自行車從該指數回到標籤開始,然後再次使用selectionStart找到結束的標籤。何時停止增加/減少標籤的開始和結束索引的條件可能有點複雜,因爲它會檢查它是否超出了textarea文本的開始/結束,或者是否開始標記爲「#」,「@」或空格。當您做出選擇時替換文本使用幾乎相同的過程來查找文本,然後用選定的標記替換文本。並在替換文本之後設置光標,方法是將光標設置爲標籤偏移量的起始位置,長度爲所選標籤的長度。