Search and display multiple columns when using jquery autocomplete in Rails?

Question

I have successfully integrated Jquery-Autocomplete into my rails app, currently users can search more than 5000+ airports and so far the integration works exactly as desired, however...

Any Airport has multiple columns, currently i am returning the airport name but would like to instead show

**

airport_name - airport_city - airport_iata - airport_icao

**

I have so far used Ryan Bates Railscast to get me started Episode #102

But amended and tweaked thanks to other resources since his video. Sorry i can't reference them right now but will update my question once i've found links to their instructions.

Either way Autocomplete does work as designed and i have managed to populate a hidden field but i would really like to display more than just the Airport name when searching. I will continue to only save the airport ID.

Any help is appreciated, here is my code.

_form.html.erb

<div class="field">
  <%= f.label :departure_airport %><br>
  <%= text_field_tag nil, nil, :id => 'claim_departure_airport_name', data: {autocomplete_source: Airport.order(:name).map { |t| { :label => t.name, :value => t.id } } }, class: "form-control" %>
</div>

<%= f.hidden_field :d_airport_id, id: 'd_airport_id' %>

<%= f.hidden_field :a_airport_id, id: 'a_airport_id' %>

claims.coffee

jQuery ->

$('#claim_departure_airport_name').autocomplete
    source: $('#claim_departure_airport_name').data('autocomplete-source')
    select: (event, ui) ->

        # necessary to prevent autocomplete from filling in
        # with the value instead of the label
        event.preventDefault()

        $(this).val ui.item.label
        $('#d_airport_id').val ui.item.value

$('#claim_arrival_airport_name').autocomplete
    source: $('#claim_arrival_airport_name').data('autocomplete-source')
    select: (event, ui) ->

        # necessary to prevent autocomplete from filling in
        # with the value instead of the label
        event.preventDefault()

        $(this).val ui.item.label
        $('#a_airport_id').val ui.item.value

As you can see i am directly reaching the model data without the need for a dedicated controller although i realise this would be much more intelligent than my current solution as i wish to roll this out in other areas of the platform.

I don't fully understand everything that is happening in the jquery code in my coffee file this was obtained from another source although i forget who to give credit. As far as i know it's taking the ID of the airport and populating the hidden field?

If you can spot how to show other airport database columns to the user that would be great.

Thanks

edit

Also wish to restrict autocomplete from loading the data source into html due to seriously long page load times. A screen shot of what i mean is below.

screenshot of data loading

Answer 1

You can modify the autocomplete source to

<%= text_field_tag nil, nil, id: 'claim_departure_airport_name', data: { autocomplete_source: Airport.select(:id, :name, :city, :iata, :icao).order(:name).map { |t| { label: "#{t.name}-#{t.city}-#{t.iata}-#{t.icao}", value: t.id } } }, class: "form-control" %>

To refactor this a bit, you can move the active record query into a helper

def airport_autocomplete_data
  Airport.select(:id, :name, :city, :iata, :icao).order(:name).map { |t| { label: "#{t.name}-#{t.city}-#{t.iata}-#{t.icao}", value: t.id } }
end

and your text field becomes

<%= text_field_tag nil, nil, id: 'claim_departure_airport_name', data: { autocomplete_source: airport_autocomplete_data }, class: "form-control" %>

Answer 2

The main point is here data: {autocomplete_source: Airport.order(:name).map { |t| { :label => t.name, :value => t.id } } }

It builds an array of objects, like [{'label': 'BKK', value: 1}, {'label': 'HAM', value: 2}]

So you either need to add something to the label key, or maybe add a different key and use it later in the select callback.

Answer 3

If you are using rails4-autocomlete Gem. You can easily override from controller.

def autocomplete_profile
      term = params[:term]
      profiles = Profile.where(
        'LOWER(profiles.first_name) LIKE ? OR LOWER(profiles.last_name) LIKE ?',
        "%#{term}%", "%#{term}%"
        ).order(:id).all
      render :json => profiles.map { |profile| {:id => profile.id, :label => profile.id, :value => profile.id} }
    end