javascript - rails 中的自动完成

标签 javascript jquery ruby-on-rails ruby-on-rails-4 coffeescript

在我的 Rails 应用程序中,我有这个字段自动完成

<%= f.label :company_name, class: "profile_label"  %><br />
<%= f.text_field :company_name, data: {autocomplete_source: Company.order(:name).map(&:name) },:autocomplete => :off, class: 'autocomplete-experience form-control profileform-botttom' %>

我还有这个用于自动完成的 coffescript 文件

jQuery ->
  $('.autocomplete-experience').autocomplete
    source: $('.autocomplete-experience').data('autocomplete-source')
    select: (event,ui) -> $("input.xx").val(ui.item.id)

这只适用于第一个字段。当我添加另一个字段时认为添加方法的链接自动完成对第二个字段不起作用。为什么会这样,我该如何解决?

更新

这是用来添加字段的代码

$('form').on 'click', '.add_fields', (event) ->
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))
    event.preventDefault()

警告信息

> SyntaxError: expected expression, got '<' edit:1069:2 Use of
> getPreventDefault() is deprecated.  Use defaultPrevented instead. edit
> SyntaxError: expected expression, got '<' edit:2:2 SyntaxError:
> expected expression, got '<' edit:2:2

这是发出警告的代码

  $('#resume-tab a').click(function (e) {
    e.preventDefault()
    $(this).tab('show')
  });

最佳答案

$.autocomplete 调用仅适用于 DOM 中已有的元素。动态添加字段后,您应该再次调用 autocomplete

setup_autocomplete = ->
  $('.autocomplete-experience').autocomplete
    source: $('.autocomplete-experience').data('autocomplete-source')
    select: (event,ui) -> $("input.xx").val(ui.item.id)

jQuery ->
  setup_autocomplete()

$('form').on 'click', '.add_fields', (event) ->
  time = new Date().getTime()
  regexp = new RegExp($(this).data('id'), 'g')
  $(this).before($(this).data('fields').replace(regexp, time))
  event.preventDefault()
  setup_autocomplete()

关于javascript - rails 中的自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29775484/

相关文章:

javascript - 加载弹出窗口并填充来自点击链接的信息

ruby-on-rails - 从1.9.1-> 1.9.3开始,将Rails App部署到Heroku时崩溃,不确定由什么组成的日志

javascript - JavaScript 中的无效索引错误

Javascript 使用 ajax 函数检查文件作为返回 bool 值

javascript - vue js 不会立即触发

jQuery Mobile 动态布局

javascript - 阻止元素上的点击事件 2 秒

javascript - 使用多个 jQuery-minicolors 样本更改多个 div 容器的背景颜色

ruby-on-rails - 当您需要触发回调时如何更新所有内容?

javascript - 访问从 CDN 加载的 CSS 的样式表规则