将文本输入定位在textarea光标位置的顶部（javascript，Textarea autcompleting）

Question

我想制作一个自动填充功能，如果输入“@”，则会提供自动填充名称列表。

我正在使用jQueryUI自动完成功能，我的解决方案（http://jsfiddle.net/aUfrz/22/）的唯一问题是自动完成文本输入需要放在textarea光标位置的顶部而不是当前的右侧站立。

这是我在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>​

请注意，我在此处显示了 NOT 一个jQuery插件，我曾在插入位置插入所选的自动填充建议：insertAtCaret()我在此other SO question找到了该插件。

Answer 1

获得插入位置的一种方法是将每个字符的像素宽度乘以插入符的字符偏移量。 Here是一个有点粗糙的例子。 textarea的x偏移量计算如下：

e.target.value.length*13

编辑：Here是一个大大改进的版本。一个重要的发现是，在单型字体中，宽度和高度之间的比例是8/13。

在下面的屏幕截图中，当我按下@时，您可以看到输入显示在插入位置。

以下是Chrome中的屏幕截图，显示了相同的行为

Answer 2

这个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>​