0

我有一个问题我需要帮助...

我想创建一个自动完成字段，如果有人键入“@”，他们会得到一个自动完成的姓名列表。

我正在使用 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 question中找到的。

4

1 回答 1

1

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

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

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

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

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

于 2013-02-01T01:55:19.987 回答