在Rails中使用jquery自動完成時搜索並顯示多列？

我已經成功地將jQuery的自動完成了我的Rails應用程序，目前用戶可以搜索超過5000多個機場也是迄今爲止集成工程完全按照期望的，但是......在Rails中使用jquery自動完成時搜索並顯示多列？

任何機場都有多列，目前我在返回機場的名字，但想代替顯示

AIRPORT_NAME - AIRPORT_CITY - airport_iata - airport_icao

我迄今所使用的瑞恩·貝茨Railscast讓我開始 Episode #102

但修訂，並因爲他的視頻調整了感謝其他資源。抱歉，我現在無法引用它們，但只要找到指示鏈接，就會更新我的問題。

無論哪種方式自動完成按照設計工作，我設法填充一個隱藏的領域，但我真的很想顯示搜索時不僅僅是機場名稱。我將繼續只保存機場ID。

任何幫助表示讚賞，這裏是我的代碼。

_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

正如你能看到我的直接到達模型數據，而不需要專用的控制器，雖然我意識到這將比我當前的解決方案更加智能化，因爲我希望在平臺的其他領域推廣這一點。

我不完全理解我的咖啡文件中的jquery代碼中發生的所有事情，這是從另一個來源獲得的，儘管我忘記了誰給了功勞。據我所知，它採取了機場的ID和填充隱藏的領域？

如果你能發現如何顯示其他機場數據庫列給用戶，那將是非常好的。

感謝

編輯

還希望從加載數據源轉換成HTML由於長期嚴重頁面加載時間限制自動完成。我的意思是屏幕截圖如下。

screenshot of data loading

來源

2016-06-14 Dearg

您可以修改自動完成源

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

重構這一點，你可以移動的活動記錄查詢到一個輔助

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

和你的文本字段變爲

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

來源

2016-06-14 12:50:54 Sebin

感謝您的答覆。我已經使用了你的初步建議，並且測試了它似乎很好。我想知道是否有辦法阻止源加載的全部內容？有5000多個機場可以搜索並加載它們兩次，因此頁面加載時間預計非常緩慢。我更新了我的問題，包括我的意思的屏幕截圖。謝謝 – Dearg

請參閱 - https://jqueryui.com/autocomplete/#remote。您需要創建一個以所需格式響應數據的新路由。你可以在那裏寫活動的記錄過濾器。 – Sebin

主要的一點是這裏data: {autocomplete_source: Airport.order(:name).map { |t| { :label => t.name, :value => t.id } } }

它建立對象的數組，像[{'label': 'BKK', value: 1}, {'label': 'HAM', value: 2}]

所以您可能需要添加一些標籤密鑰，或者可能添加一個不同的密鑰並在稍後的select回調中使用它。

來源

2016-06-14 11:12:57 egze

如果您使用的是rails4-autocomlete Gem。您可以輕鬆地從控制器覆蓋。

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

來源

2017-09-06 11:00:39

在Rails中使用jquery自動完成時搜索並顯示多列？

回答

相關問題