Javascript 将jQuery自动完成数据附加到textarea内容，而不是覆盖它

我正在尝试在我的rails应用程序中创建一个

@

其他人功能，就像stackoverflow：

我几乎已经完成了这个功能，但是我遇到了一些问题，jQuery自动完成数据替换了我的textarea内容，而不是append

咖啡脚本：

find_at_sign = ->
  if $("#tags").val().split('').pop() == "@"
    id = $("#tags").data("article-id")
    $("#tags").autocomplete
      source:  '/articles/' + id + '/autocomplete.json'
      minLength: 1

$ ->
  $(document).on("input", "#tags",
  -> find_at_sign())

  def autocomplete
    @articles = Article.find_by(id: params[:article_id])
    @commentor_names = @articles.comments.map(&:name).uniq
    respond_to do |format|
      format.html
      format.json {
        render json: @commentor_names
      }
    end
  end

 <div class="form-group ui-widget">
    <div class="col-sm-5">
      <%= f.text_area :content, rows: 5, placeholder: '说点什么...', 
          class: 'form-control', id: "tags", 'data-article-id': @article.id.to_s %>
    </div>
  </div>

物品管理员：

find_at_sign = ->
  if $("#tags").val().split('').pop() == "@"
    id = $("#tags").data("article-id")
    $("#tags").autocomplete
      source:  '/articles/' + id + '/autocomplete.json'
      minLength: 1

$ ->
  $(document).on("input", "#tags",
  -> find_at_sign())

  def autocomplete
    @articles = Article.find_by(id: params[:article_id])
    @commentor_names = @articles.comments.map(&:name).uniq
    respond_to do |format|
      format.html
      format.json {
        render json: @commentor_names
      }
    end
  end

 <div class="form-group ui-widget">
    <div class="col-sm-5">
      <%= f.text_area :content, rows: 5, placeholder: '说点什么...', 
          class: 'form-control', id: "tags", 'data-article-id': @article.id.to_s %>
    </div>
  </div>

表单\u html.erb:

find_at_sign = ->
  if $("#tags").val().split('').pop() == "@"
    id = $("#tags").data("article-id")
    $("#tags").autocomplete
      source:  '/articles/' + id + '/autocomplete.json'
      minLength: 1

$ ->
  $(document).on("input", "#tags",
  -> find_at_sign())

  def autocomplete
    @articles = Article.find_by(id: params[:article_id])
    @commentor_names = @articles.comments.map(&:name).uniq
    respond_to do |format|
      format.html
      format.json {
        render json: @commentor_names
      }
    end
  end

 <div class="form-group ui-widget">
    <div class="col-sm-5">
      <%= f.text_area :content, rows: 5, placeholder: '说点什么...', 
          class: 'form-control', id: "tags", 'data-article-id': @article.id.to_s %>
    </div>
  </div>

---

感谢您的帮助！

您可以做以下两件事之一：

你可以简单地用你想要的内容替换@符号，但这可能会让你陷入麻烦

您可以获取光标位置并在光标后添加内容，这可能需要一些工作

以下是一个例子：

 function (tid) {

        node=$('#'+tid)[0];

        try{
        //--- Wrap selected text or insert at curser.
        var oldText         = node.value || node.textContent;
        var newText;
        var iTargetStart    = node.selectionStart;
        var iTargetEnd      = node.selectionEnd;

        if (iTargetStart == iTargetEnd)
            newText         = left+right;
        else
            newText         = left + oldText.slice (iTargetStart, iTargetEnd) + right;

        //console.log (newText);
        newText             = oldText.slice (0, iTargetStart) + newText + oldText.slice (iTargetEnd);
        node.value          = newText;
        //-- After using spelling corrector, this gets buggered, hence the multiple sets.
        node.textContent    = newText;
        //-- Have to reset selection, since we repasted the text.
        node.selectionStart = iTargetStart + left.length;
        node.selectionEnd   = iTargetEnd   + left.length;
            node.focus ();
....

---

以下是我在这方面的半心半意尝试，基于。重要信息如下：

• 取消试图覆盖文本框内值的内置事件
• 取消内置事件，并将其配置为在文本框中附加选定的

  @name

  ，而不是覆盖它
• 提供一个自定义函数，从文本框中提取最后一个

  @name

  ，并查找该名称并返回匹配的名称

var名称列表=[
“亚当”，
“阿德里安”，
“安德鲁”，
“查尔斯”，
“丹尼尔”，
“大卫”，
“埃文”，
“亨利”，
“伊恩”，
“杰克”，
“詹姆斯”，
“约翰”，
“约瑟夫”，
“贾斯汀”，
“凯文”，
“迈克尔”，
“帕克”，
“罗伯特”，
“托马斯”，
“威廉”
];
$（函数（）{
$（“#消息”）.autocomplete({
来源：功能（请求、响应）{
var match=request.term.match（/@（\w*）$/）；
变量名称=匹配？$.ui.autocomplete.filter（名称列表，匹配[1]）：[]；
答复（姓名）
},
焦点：功能（事件）{
event.preventDefault（）；
},
选择：功能（事件、用户界面）{
event.preventDefault（）；
this.value=this.value.replace（/@（\w*）$/，“@”+ui.item.value）
}
})
});
@导入url（“https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.min.css");
身体{
字体：较小的无衬线字体；
}
文本区{
框大小：边框框；
宽度：100%；
身高：5公分；
}

输入一些文本或@name

我正在为此使用jquery插件：
在minlength:1之后必须有更多的代码。请给我们看一下。@Rohitara没有其他代码，我显示了所有代码。希望这个链接有帮助@非常感谢，我会检查的。