Question

I have the following, very straight forward form.

<%= form_for(@position) do |f| %>
  <div class="field">
    <%= f.label :name %><br />
    <%= f.autocomplete_field :name, autocomplete_position_name_positions_path %>
  </div>
<% end %>

<script type="text/javascript" charset="utf-8">
  $('#name').bind('railsAutocomplete.select', function(event, data){
    /* Do something here */
    alert(data.item.id);
  });
</script>

Autocomplete all works nicely, but the alert(..) method is not called. I am very new to all this JavaScript stuff, so I’d be very thankful if somebody could point me into the right direction. Here’s what the compiled source looks like:

<form accept-charset="UTF-8" action="/positions" class="new_position" id="new_position" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="Sw+3CMXWmEPPYCNeCsAfNRX2DupZzZglMNSAnC4yDV4=" /></div>
  <div class="field">
    <label for="position_name">Name</label><br />
    <input data-autocomplete="/positions/autocomplete_position_name" id="position_name" name="position[name]" size="30" type="text" />
  </div>
</form>
<script type="text/javascript" charset="utf-8">
  $('#name').bind('railsAutocomplete.select', function(event, data){
    /* Do something here */
    alert(data.item.id);
  });
</script>

Thanks a lot, guys!

Answer 1

Does your input have id “name”? Seems its id is “position_name”, not just “name”. Try to change $("#name") to $("#position_name").