テキストエリアのカーソル位置の上にテキスト入力を配置する（javascript、Textarea autcompleting）

Question

オートコンプリートを作成したい場合は、オートコンプリートリストを "@"と入力します。

私はjQueryUIオートコンプリートを使用していますが、私の解決策（http://jsfiddle.net/aUfrz/22/）の唯一の問題は、オートコンプリート可能なテキスト入力をテキストエリアのカーソル位置の上に配置する必要があり、ここで

はJSFiddleにあります私のJSです：

$(document.body).on('keypress', 'textarea', function(e) { 
    var names = [ 
     "johnny", 
     "susie", 
     "bobby", 
     "seth" 
    ], 
    $this=$(this), 
    char = String.fromCharCode(e.which); 

    if(char == '@') { 
     console.log('@ sign pressed'); 
     var input=$('<input style="position:relative; top:0px; left:0px;background:none;border:1px solid red" id="atSign" >'); 
     $this.parent().append(input); 
     input.focus(); 
     input.autocomplete({ 
     source: names, 
     select: function (event, ui) { 
      console.log('value selected'+ui.item.value); 
      //$this.val('@'+ui.item.value); 
      $this.insertAtCaret(ui.item.value); 
      $this.focus(); 
      input.remove(); 
     } //select 
    }); //autocomplete 
    } //if 
}); // keypress 

HTML：

<textarea></textarea>​ 

私はここに私が選択したオートコンプリートの提案を挿入するために使用jQueryプラグインを示していないていることに注意してくださいキャレット位置：insertAtCaret()私はこれで見つけましたother SO question。

Answer 1

このother SO answerこのかなり滑らかなjQueryプラグインasuggestに言及している私はするつもり何ですと一緒に行きます。あなたの助けに感謝@asad。ここで

はasuggest()を使用して、最終製品のJSFiddleです：http://jsfiddle.net/trpeters1/xjyTW/2/

ここで、このJSFiddleからJSです：

$.fn.asuggest.defaults.delimiters = "@"; 
$.fn.asuggest.defaults.minChunkSize = "0"; 

$(document.body).on('keypress', 'textarea', function(e) { 
    var names = [ 
    "johnny", 
    "susie", 
    "bobby", 
    "seth" 
    ], 
    $this=$(this), 
    char = String.fromCharCode(e.which); 

    if(char == '@') { 
    $this.asuggest(names); 
    var v=''; 
    if($this.click()) { console.log('clicked textarea');   
     v=$this.val(); console.log('texarea value'+v);   
     for(var i=0; i<names.length;i++){ 
     if(v.indexOf('@'+names[i]) != -1){ 
      names.splice(i,1); console.log('names spliced away: @'+names[i]);    
     } // if indexOf 
     } //for 
    } //if click 
    } //if @ 
}); //keypress​ 

HTML：

<textarea></textarea>​ 

Answer 2

キャレット位置を取得する1つの方法は、各文字のピクセル幅にキャレットの文字オフセットを掛けることです。 Hereは、実証したやや粗悪な例です。 TEXTAREAからのオフセットXは次のように計算される：

e.target.value.length*13 

EDIT：Hereが大幅に改良版です。重要な発見は、モノタイプのフォント面で幅と高さの比が8/13であることでした。

以下のスクリーンショットでは、@を押すと入力がキャレット位置に表示されていることがわかります。

そして、ここでChromeのスクリーンショットで、同じ挙動を示す