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的自定义富文本编辑器 - 但要确保它看起来像常规文本区域（因为复制粘贴会粘贴）非常困难在格式化，这可能你不想要）。

将自动完成框定位在文本区域旁边（在某一侧，可能在它下面？）似乎是您最好的选择。

Textarea autcompleting - 使用JavaScript将文本输入定位在textarea光标位置的顶部

1 个答案: