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

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

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

IE 有选择对象，我相信你可以获得 X/Y 坐标来放置你的自动完成输入元素——但这在任何其他浏览器上都不起作用。

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

您也许能够创建一个自定义的富文本编辑器，它使用带有内容可编辑标志的 iframe - 但这将很难确保它看起来像一个常规文本区域(因为复制粘贴将粘贴在格式化中，这可能是您不想要的)。

将自动完成框放置在文本区域旁边(在某侧，也许在它下面？)似乎是您最好的选择。