8

このビデオhttp://railscasts.com/episodes/102-auto-complete-association-revisedを使用して、アプリのフォームにオートコンプリート検索入力を設定しました。(ビデオはメンバー専用かもしれないので、私のコードも投稿します。基本的に、DB (名前) の列を検索し、入力時にドロップダウンでオートコンプリートします。これはすべて正常に機能しますが、フォームで行うことは、名前自体ではなく、名前に関連する ID を送信することです。

ビューだけでこれを行う簡単な方法はないと思います。どんな助けでも素晴らしいでしょう。以下のコード、他のコードが役立つかどうか教えてください。

ありがとう

コントローラ：

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)} %>
4

2 に答える 2

11

@LukasSvoboda の提案に加えて、ドロップダウンからアイテムを選択したときにトリガーされるselect イベントコールバックをオーバーライドすることもできます。コールバックでは、テキスト フィールド (送信する必要はありません) を選択したアイテムの「ラベル」に設定し、ゲーム 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
于 2012-11-20T23:45:22.013 に答える
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 } } %>

より高度な機能については、select2 または selected の使用を検討してください。

于 2012-11-18T19:26:24.027 に答える