Suche und Anzeige mehrerer Spalten bei der Verwendung von jQuery Autocomplete in Rails?

Question

Ich habe erfolgreich Jquery-Autocomplete in meine Rails App integriert, derzeit können Benutzer mehr als 5000+ Flughäfen suchen und bisher funktioniert die Integration genau wie gewünscht, aber

Jeder Flughafen hat mehrere Spalten, derzeit bin ich den Flughafennamen zurückkehren möchte aber stattdessen

**

airport_name zeigen - AIRPORT_CITY - airport_iata - airport_icao

**

Ich habe bisher Ryan Bates Railscast verwendet, um mich zu erhalten begonnen Episode #102

aber geändert und optimiert dank andere Ressourcen seit seinem Video. Entschuldigung, ich kann sie jetzt nicht referenzieren, werde aber meine Frage aktualisieren, sobald ich Links zu ihren Anweisungen gefunden habe.

In jedem Fall Autocomplete funktioniert wie geplant und ich habe es geschafft, ein verstecktes Feld zu füllen, aber ich würde wirklich gerne mehr als nur den Namen des Flughafens bei der Suche anzeigen. Ich werde weiterhin nur die Flughafen-ID speichern.

Jede Hilfe ist willkommen, hier ist mein 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 

Wie man sehen kann ich ohne die Notwendigkeit, die Modelldaten direkt am Erreichen für einen dedizierten Controller, obwohl ich realisiere, dass dies viel intelligenter wäre als meine derzeitige Lösung, da ich dies in anderen Bereichen der Plattform einführen möchte.

Ich verstehe nicht alles, was in der jQuery-Code in meiner Kaffeedatei passiert, die aus einer anderen Quelle erhalten wurde, obwohl ich vergess, wer Kredit geben. Soweit ich weiß, nimmt es die ID des Flughafens und bevölkert das versteckte Feld?

Wenn Sie erkennen können, wie andere Flughafen-Datenbankspalten dem Benutzer angezeigt werden, wäre das großartig.

Dank

bearbeiten

wünschen sich auch die automatische Vervollständigung daran zu hindern, die Datenquelle in html aufgrund ernsthaft lange Ladezeiten zu laden. Ein Screenshot von dem, was ich meine, ist unten.

screenshot of data loading

Answer 1

Sie können die Autocomplete-Quelle zu

ändern

<%= 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" %> 

dieses ein wenig Refactoring können Sie den aktiven Datensatz Abfrage in einen Helfer bewegen

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 

und Ihr Textfeld wird

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

Answer 2

Der wichtigste Punkt ist hier data: {autocomplete_source: Airport.order(:name).map { |t| { :label => t.name, :value => t.id } } }

Es baut ein Array von Objekten, wie [{'label': 'BKK', value: 1}, {'label': 'HAM', value: 2}]

So muss man entweder etwas mit dem Etikett Schlüssel hinzuzufügen, oder vielleicht einen anderen Schlüssel hinzufügen und benutze es später im select Callback.

Answer 3

Wenn Sie rails4-autocomlete Gem verwenden. Sie können den Controller leicht außer Kraft setzen.

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