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

pangpang

我正在尝试让@其他人在我的Rails应用程序中运行,就像stackoverflow一样:

在此处输入图片说明

我几乎完成了此功能,但是遇到问题,jQuery自动完成数据替换了我的textarea内容,而不是附加内容。

在此处输入图片说明

咖啡脚本:

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

form_html.erb:

 <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>

我尝试使用append方法,但不起作用:

$("#tags").append(${this).autocomplete
  source:  '/articles/' + id + '/autocomplete.json'
  minLength: 1)

任何帮助表示赞赏!

萨尔曼A

根据这个例子,这是我三心二意的尝试重要的位如下:

  • 取消focus试图覆盖文本框内值的内置事件
  • 取消内置select事件并将其配置为附加选定的@name内部文本框,而不是覆盖它
  • 提供一个自定义source函数,该函数@name将从文本框中提取最后一个,并查找该名称并返回匹配的名称

var namelist = [
  "Adam",
  "Adrian",
  "Andrew",
  "Charles",
  "Daniel",
  "David",
  "Evan",
  "Henry",
  "Ian",
  "Jack",
  "James",
  "John",
  "Joseph",
  "Justin",
  "Kevin",
  "Michael",
  "Parker",
  "Robert",
  "Thomas",
  "William"
];
$(function() {
  $("#message").autocomplete({
    source: function(request, response) {
      var match = request.term.match(/@(\w*)$/);
      var names = match ? $.ui.autocomplete.filter(namelist, match[1]) : [];
      response(names)
    },
    focus: function(event) {
      event.preventDefault();
    },
    select: function(event, ui) {
      event.preventDefault();
      this.value = this.value.replace(/@(\w*)$/, "@" + ui.item.value)
    }
  })
});
@import url("https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.min.css");

body {
  font: smaller sans-serif;
}
textarea {
  box-sizing: border-box;
  width: 100%;
  height: 5em;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>


<p>Enter some text or @name</p>
<textarea id="message"></textarea>

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

jQuery自动完成数据

清除自动完成数据jQuery

如何将jQuery自动完成附加到输入元素

我正在尝试将 url 链接添加到自动完成数据

数据被覆盖,而不是附加到CSV

尝试将新文本附加到文本文件而不是在 while 循环中覆盖它

将文字附加到FTP而不是覆盖

呈现jQuery自动完成数据中存在的html元素

jQuery UI使用Ajax来自动完成数据

如何将更多内容添加到LocalStorage中而不是覆盖它?

如何使 useState 附加数据而不是覆盖它

自动将基于<th>的数据标签的内容附加到相应的<td>上,以进行响应表视图

是否可以让ng-repeat将数据附加到现有内容而不是替换?

为什么jQuery html()方法将内容添加到段落而不是替换它?

过滤自动完成数据源

输入中的自动完成数据

使用 jquery 将数据附加到 div

JQUERY / AJAX将数据附加到特定行的末尾而不是表的底部

Jquery 将数据堆栈附加到彼此之上而不是超过表长度

将数据添加到列并附加它

如何将字典附加到列表而不覆盖数据

将新数据附加到工作表而不覆盖 GAS

JQuery 将 div.class 附加到它的标签

将Google Apps脚本数组应用于HTML表单自动完成数据列表

为什么该网站返回包装在jQuery标签中的自动完成数据?

我可以自动将数据附加到链接吗?

将数据附加到 Metal 中 MTLBuffer 的现有内容

如何将更多对象附加到JSON对象而不覆盖它?

添加到对象而不是覆盖它