In Rails 3, I use the jQuery Tokenize plugin, but the form submits a value, not an identifier

Question

I love this plugin, I used it in PHP with ease, but now I'm trying to use Rails 3 and for some reason when the form is submitted, it does not send the identifier of the selected element, it sends the actual value. I even printed out JSON to make sure that the data is correctly filed in the input field and it shows the identifier and VALUE value.

Any ideas on why this is happening. I thought that maybe I need to add a custom javascript call for onBlur, but I never had to do this before. Does anyone have any other suggestions, or even a completely different way to do auto-completion in Rails with multiple choices?

I appreciate any help you can give me, thanks! And yes, I know the input is not cleared :)

  def autocomplete
    autolist = []
    sql = "SELECT id,username from users WHERE username LIKE '" + params[:q] + "%'"
    result = ActiveRecord::Base.connection.execute(sql)
    result.each { |field| autolist.push( {"id" => field[0], "name" => field[1]} ) }
    render :json => autolist, :layout => false
  end

Code for form:

<% form_for @message, :url => user_messages_path(@user), :html => { :multipart => true } do |f| %>
    <tr>
        <% if @reply_to.nil? %>
        <td width="100"><p class="labels">To:</p></td>
        <td><%= f.text_field :to %>
            <%= error_message_on @message, :to %></td>
        <% else %>
      <td width="100">To: <%= @message.to %><%= f.hidden_field :to, :value => @message.to  %></td>
        <% end %>
    </tr>
  <tr>
    <% if @reply_to.nil? %>
    <td width="100"><p class="labels">Patient:</p></td>
    <td><%= f.collection_select :patient_id, Patient.find_all_by_user_id(current_user), :id, :last_name %>
        <%= error_message_on @message, :patient_id %></td>
    <% else %>
    <td width="100">Patient: <%= Patient.find(@message.patient_id).last_name %><%= f.hidden_field :patient_id, :value => @message.patient_id  %></td>
    <% end %>
  </tr>
  <tr>
    <% if @reply_to.nil? %>
    <td width="100"><p class="labels">Subject:</p></td>
    <td><%= f.text_field :subject %>
    <%= error_message_on @message, :subject %></td>
    <% else %>
    <td width="100">Subject: <%= @message.subject %><%= f.hidden_field :subject, :value => @message.subject  %></td>
    <% end %>
  </tr>
  <tr>
      <td width="100" valign="top"><p class="labels">Message:</p></td>
      <td><%= f.text_area :body %>
            <%= error_message_on @message, :body %></td>
  </tr>
  <tr>
      <td width="100" valign="top"><p class="labels">Attachment:</p></td>
      <td><%= f.file_field :attachment %><%= error_message_on @message, :attachment %></td>
  </tr>
  <tr>
      <td colspan="2"><%= submit_tag "Send" %></td>
  </tr>
</table>

Javascript

<script language="javascript">
$(function($) {
    $("#message_to").tokenInput("/users/1/friends/autocomplete", {
                hintText: "Type in the name of a colleague",
                noResultsText: "No results",
                searchingText: "Searching..."
            });
});
</script>

Answer 1

Your text box and your hidden box need different names.