1

ユーザーが @ 記号を入力した後にオートコンプリートが開始されるテキスト領域があります。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 )
4

1 に答える 1