2012-11-18 85 views
8

我已使用此視頻http://railscasts.com/episodes/102-auto-complete-association-revised爲我的應用在表單中設置自動填充搜索輸入。 (這個視頻可能只針對會員,所以我也會發布我的代碼,實際上它會在你輸入的時候在一個下拉列表中搜索數據庫(名稱)的列和自動完成,這一切都很好,但是,我想要的要做的事是提交與名稱相關的ID,而不是名稱本身。Rails:如何自動完成搜索名稱但保存ID?

我假設theres沒有簡單的方法來做到這一點在視圖中任何幫助將是偉大的代碼下面,讓我知道如果任何其他代碼將是有益的

感謝

控制器:

def game_name 
    game.try(:name) 
end 

def game_name=(name) 
    self.game = Game.find_by_name(name) if name.present? 
end 

咖啡:

jQuery -> 
$('#play_game_name').autocomplete 
    source: $('#play_game_name').data('autocomplete-source') 

在視圖:

<%= f.label :game_name, "Search for a game" %> 
    <%= f.text_field :game_name, :class => "mlm mtm", data: {autocomplete_source: Game.order(:name).map(&:name)} %> 
+0

如果你有獲得價值,當你按下DownKey或UpKey,尋找[此帖] [1] [1]:http://stackoverflow.com/questions/8045773/jquery-ui-autocomplete-downarrow-uparrow – Fist

回答

9

除了按照@LukasSvoboda的建議,您還可以覆蓋回調,當您從下拉菜單中選擇一個項目時,會觸發回調。在回調中,您可以將文本字段(不需要提交)設置爲所選項目的「標籤」,並將遊戲ID(需要提交)的隱藏字段的值設置爲所選項目的「價值」。

在咖啡:

jQuery -> 
    $('#play_game_name').autocomplete 
    source: $('#play_game_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 
    $('#game_id').val ui.item.value 

在標記:

<%= text_field_tag nil, nil, :id => 'play_game_name', :class => "mlm mtm", data: {autocomplete_source: Game.order(:name).map { |t| { :label => t.name, :value => t.id } } %> 
<%= f.hidden_field :game_id, id: 'game_id' %> # tailor to your model 
+0

感謝您的回答。自動完成仍然有效,但之後的所有內容似乎都不起作用。搜索輸入仍然顯示單擊下拉後的值,隱藏的輸入不會獲得值。奇。這就像自動完成之後的所有內容都不起作用。有沒有JS錯誤= \ –

+0

我的縮進有點關閉,但我認爲你已經解決了你的問題。你有沒有嘗試在選擇回調中放置一個警報,看看它是否至少開火? – cdesrosiers

+0

是的,我在我的最後固定了縮進。我清理了一堆其他的JS,因爲我發現其他地方的東西導致了我一些問題。當我規定了除jQuery和jQuery UI之外的所有內容時,我得到以下錯誤:「Uncaught ReferenceError:ui is not defined」。超級奇怪,有什麼想法? –

3

通過http://api.jqueryui.com/autocomplete/#option-source可以設置數據的自動完成。

您需要更改像text_field行:

<%= f.text_field :game_name, :class => "mlm mtm", data: {autocomplete_source: Game.order(:name).map { |t| { :label => t.name, :value => t.id } } %> 

對於更高級的功能,則應考慮使用選擇2或選擇。

+0

謝謝你的答案!一對夫婦注意:你的代碼中有一個缺失(不是問題,在我的末端修復了它)。您的解決方案可以正常工作,但ID在自動完成後顯示在輸入中。有沒有一種簡單的方法來顯示遊戲名稱並提交ID而無需用戶看到ID號碼? –