在文本區域的光標位置上放置文本輸入（javascript，Textarea autocompleting）

Question

我想創建一個自動完成功能，如果輸入「@」，則會提供自動完成的名稱列表。

我正在使用jQueryUI自動完成，唯一的問題與我的解決方案（http://jsfiddle.net/aUfrz/22/）是自動完成的文本輸入需要放在textarea光標位置的頂部，而不是目前的立場。

這裏是我的JS這是在的jsfiddle：

$(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/

這裏的JS從這個的jsfiddle：

$.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

獲取脫字符位置的一種方法是將每個字符的像素寬度乘以脫字符的字符偏移量。 Here是一個粗略的例子，演示。在x從textarea的偏移的計算是這樣的：

e.target.value.length*13 

編輯：Here是一個很大的改善版本。一個重要的發現是，在monotype字體中，寬度和高度之間的比率是8/13。

在下面的屏幕截圖中，您可以看到當我按@時輸入出現在插入位置。

這裏是在Chrome瀏覽器的截圖，顯示了相同的行爲