Textarea 自动完成 - 使用 JavaScript 将文本输入定位在 textarea 的光标位置之上

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()，我在此 other SO question 找到了它。

Answer 1

没有跨浏览器的方法来检索文本区域插入符号位置的屏幕坐标。

IE 有选择对象，我相信您可以获得 X/Y 坐标来放置您的自动完成输入元素 - 但这不适用于任何其他浏览器。

我从未见过带有自动完成小部件的文本区域小部件，它与您输入的文本内联显示 - 实现起来并不实际，并且不适用于所有浏览器。

您也许可以创建一个自定义富文本编辑器，该编辑器使用 iframe 并使用 content editable 标志 - 但要确保它看起来像一个常规文本区域将非常困难（因为复制粘贴会粘贴在格式化，这可能是你不想要的）。

将自动完成框放置在文本区域旁边（在某侧，可能在其下方？）似乎是您最好的选择。