将文本输入定位在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>?

请注意,我没有在这里显示一个jQuery插件,我曾经在插入位置插入所选的自动完成建议:insertAtCaret()我在其他SO问题中找到了.

Answer 1

这个另一个答案提到了这个漂亮的 jQuery 插件作为建议就是我要使用的。感谢@asad 的帮助。

\n\n

这是最终产品的 JSFiddle 使用asuggest()：http://jsfiddle.net/trpeters1/xjyTW/2/

\n\n

这是来自 JSFiddle 的 JS：

\n\n

$.fn.asuggest.defaults.delimiters = "@";\n$.fn.asuggest.defaults.minChunkSize = "0";  \n\n$(document.body).on(\'keypress\', \'textarea\', function(e) {\n  var names = [\n    "johnny",\n    "susie",\n    "bobby",\n    "seth"\n  ],\n  $this=$(this),\n  char = String.fromCharCode(e.which);\n\n   if(char == \'@\') {\n     $this.asuggest(names);\n     var v=\'\';\n     if($this.click()) { console.log(\'clicked textarea\');           \n       v=$this.val(); console.log(\'texarea value\'+v);           \n       for(var i=0; i<names.length;i++ ){ \n         if(v.indexOf(\'@\'+names[i]) != -1){\n           names.splice(i,1);  console.log(\'names spliced away: @\'+names[i]);              \n         } // if indexOf\n       } //for\n     } //if click\n   } //if @\n}); //keypress\xe2\x80\x8b\n

\n\n

HTML：

\n\n

<textarea></textarea>\xe2\x80\x8b\n

\n