ユーザーが @ 記号を入力した後にオートコンプリートが開始されるテキスト領域があります。Twitter がユーザー名のオートコンプリートを処理する方法に似ています。jQueryオートコンプリートプラグインとキャレットプラグインを使用します。
通常、オートコンプリートはテキスト フィールド全体をユーザーが選択したものに置き換えます。この場合、@ の後の部分のみを置き換えます。テキストに複数の @ 記号がある場合でも機能します。
私のCoffeeScriptは少しさびているので、誰かが改善を提案できるかどうか疑問に思っていました. 特に、検索メソッドとソース メソッドの間で現在のカーソル位置などの変数を渡す方法が好きではありません。
$('.myTextArea').autocomplete
search: (event,ui) ->
# Figure out where in the text we are currently typing
# Cursor position:
target = $("#" + event.target.id) # I'm sure there's a more elegant solution
window.cursor_pos = target.caret()
window.word = getWordAt(event.target.value, window.cursor_pos);
if window.word[0] == "@"
$('#spinner').show()
else
return false
open: (event, ui) ->
$('#spinner').hide()
focus: (event, ui) ->
return false
source: (request, response) ->
$.getJSON("/users/autocomplete_username", { term: window.word.slice(1) }, response);
select: (event,ui) ->
start_of_word = window.cursor_pos - window.word.length + 1
start = event.target.value.substring(0, start_of_word)
ending = event.target.value.substring(window.cursor_pos, event.target.value.length)
event.target.value = start + ui.item.id + ending
target = $("#" + event.target.id)
target.caret(start_of_word + ui.item.id.length )