【问题标题】:Autocomplete in railsRails 中的自动完成
【发布时间】:2015-06-28 19:22:56
【问题描述】:

在我的 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' %>

我也有这个用于自动完成的咖啡脚本文件

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')
  });

【问题讨论】:

  • 如何添加第二个字段?如果您通过 javascript 添加它,您可能需要再次调用您的自动完成功能。
  • 是的,我是通过coffeescript添加的,你可以在更新时看到代码
  • 在页面中创建新的 HTML 元素后,您需要调用 $('.autocomplete-experience').autocomplete。在表单的“添加字段”onclick 事件的末尾添加$('.autocomplete-experience').autocomplete,它应该在新添加的字段上部署自动完成功能。
  • @MrYoshiji 我已经尝试过您的解决方案,但没有成功
  • 您是否收到任何 javascript 错误/警告消息? (查看浏览器的控制台)

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


【解决方案1】:

$.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()

【讨论】:

  • 我已经尝试过您的解决方案,但未能成功使其仅在第一个有效的字段中起作用
  • 您的第二个字段是否具有相同的类autocomplete-experience
  • 是的,它是一个动态字段,因此第二个字段将与第一个字段具有相同的类
猜你喜欢
  • 2016-05-06
  • 2011-12-23
  • 1970-01-01
  • 2012-03-20
  • 2010-10-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多