• d_a_n
  • Ticketholder
  • Offline
  • Registered: 2012-01-23
  • Posts: 13

Topic: jquery ui autocomplete with labels and values

I have a view with a field which uses Jquery UI autocomplete (http://jqueryui.com/demos/autocomplete/) to populate the field selecting from a javascript array (following Railscast http://railscasts.com/episodes/102-auto … -revised).

<div class="field">
  <%= f.text_field :person_fullname, data: {autocomplete_source: Person.order(:firstname).map(&:fullname)}%>
</div>

This creates a data array in the format:
[ "Choice1", "Choice2" ]

I would like to use the autocomplete above to actually select a value (the Person.id), so need to form a data array in the format:
[ { label: "Choice1", value: "value1" }, ... ]

I'd be grateful for any advice on how I can create this array.

Thanks in advance.

Last edited by d_a_n (2012-02-23 19:36:41)

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: jquery ui autocomplete with labels and values

<%= f.text_field 
  :person_fullname, 
  data: {autocomplete_source: 
    Person.order(:firstname).map{|p| [p.fullname,p.id]}
  }%>

Last edited by BradHodges (2012-02-23 21:25:34)

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • d_a_n
  • Ticketholder
  • Offline
  • Registered: 2012-01-23
  • Posts: 13

Re: jquery ui autocomplete with labels and values

Brad

Thank you. That worked and is mapping the id and fullname. I'm getting:

<input data-autocomplete-source="[[&quot;fullname1&quot;,&quot;1&quot;],[&quot;fullname2&quot;,&quot;3&quot;],[&quot;fullname3&quot;,&quot;2&quot;]]" id="person_id" name="person_id" type="text" />

But the autocomplete still isn't working - it looks as though it requires the "label:" and "value:" attribute names, and for each pair to be in "{" rather than "[" , i.e.

[ { label: "fullname1", value: "1" }, ... ]

I'd be grateful for your advice
Dan

  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: jquery ui autocomplete with labels and values

<%= f.text_field
  :person_fullname,
  data: {autocomplete_source:
    escape_javascript(Person.order(:firstname).map{|p| [p.fullname,p.id]})
  }%>

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • From: Los Angeles CA
  • Registered: 2008-03-17
  • Posts: 1,701

Re: jquery ui autocomplete with labels and values

Sorry, didn't read your post completely!

<%= f.text_field
  :person_fullname,
  data: {autocomplete_source:
    Person.order(:firstname).map{|p| {:label=>p.fullname,:value=>p.id}}
  }%>

Joe got a job, on the day shift, at the Utility Muffin Research Kitchen, arrogantly twisting the sterile canvas snout of a fully charged icing anointment utensil.
  • d_a_n
  • Ticketholder
  • Offline
  • Registered: 2012-01-23
  • Posts: 13

Re: jquery ui autocomplete with labels and values

Brad, thanks again. I'm posting the final working version for anyone else who is interested:

...html.erb

<p id="notice"><%= notice %></p>
<p>Please start typing your firstname, then select your name from the list:</p>  
<%= form_tag("/next_action/", :id => "select_person", :method => "post") do %>
  <%= hidden_field_tag(:person_id)%>
  <%= text_field_tag(:person_name, nil, :data => {autocomplete_source: Person.order(:firstname).map{|p| {:label=>p.fullname,:id=>p.id}}})%>
<% end %>

...js.coffee

jQuery ->
  $('#person_name').autocomplete
    source: $('#person_name').data('autocomplete-source')
    select: (event, ui) ->
      $( "#person_name" ).val( ui.item.label );
      $( "#person_id" ).val( ui.item.id );
      $( "#select_person" ).submit();
      
  $('#person_name').focus();

Dan