Question

I have a Rails form for email, and I would like to have auto-completion in Receiver field. Here is what I did:

= f.label :recipient_id, "Send to:"
= text_field_tag :recipient_id, nil
:javascript
 $(function() {
    $( "#recipient_id" ).autocomplete({
        source: "#{escape_javascript url_for(:action => 'recipient_autocomplete',
                     :controller => 'sent')}",
        minLength: 2,
        select: function( event, ui ) {
            $('input#recipient_id').attr('value', ui.item.value);
            ui.item.value = ui.item.label
        }
    });
});

In my controller, I have:

  def recipient_autocomplete
    @users= User.all(:conditions => ['first_name LIKE ? OR last_name LIKE?', 
      "%#{params[:term]}%", "%#{params[:term]}%"])
    render :json => @users.collect {|x| {:label=>x.full_name, :value=>x.id}}.compact
  end

The json call works fine and display full name OK. Here is the element:

<input type="text" name="recipient_id" id="recipient_id" class="ui-autocomplete-input"
  autocomplete="off" role="textbox" aria-autocomplete="list" 
  aria-haspopup="true" value="158">

However, when I click Send (equivalent to submit), the receipient full name is sent instead of receipient_id.

How do I tell Rails form to pick up the value (158 in the above example) of the input field instead of its label?

Answer 1

Err well the HTML spec says the text of the text_field is the value it’s going to return. But you can just use a hidden_field to pass the _id like so,

= f.label :recipient_id, "Send to:"
= text_field_tag :recipient_name, nil
= hidden_field_tag :recipient_id, nil
:javascript
 $(function() {
    $( "#recipient_id" ).autocomplete({
        source: "#{escape_javascript url_for(:action => 'recipient_autocomplete',
                     :controller => 'sent')}",
        minLength: 2,
        select: function( event, ui ) {
            $('input#recipient_name').val(ui.item.label);
            $('input#recipient_id').val(ui.item.value);
        }
    });
});

That’s from This JqueryUI page