CODEWITHSUNDEEP
javascriptjqueryruby-on-railsruby-on-rails-4coffeescript
rocki
rocki

Reputation: 107

Autocomplete in rails

In my rails application I have this field with autocomplete

<%= 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' %>

I have also this coffescript file for the autocomplete

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

This works but only for the first field. When I add another field thought the link to add method the autocomplete won't work for the second field. why is this and how can I resolve this?

Update

this is the code used to add fields

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

the warning message

> 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

and this is the code that give this warning

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

Upvotes: 2

Views: 445

Answers (1)

cenanozen
cenanozen

Reputation: 1130

The $.autocomplete call will only work for the elements that are alreay in the DOM. After you add a field dynamically you should call autocomplete again.

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

Upvotes: 1

Related Questions