8

我已使用此视频http://railscasts.com/episodes/102-auto-complete-association-revised在我的应用程序的表单中设置自动完成搜索输入。（该视频可能仅供会员使用，所以我也会发布我的代码。本质上，它会搜索数据库（名称）的一列，并在您键入时在下拉列表中自动完成。这一切都很好，但是，我想要什么要提交的表单是提交与名称相关的 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 回答