【问题标题】:Rails: How do I autocomplete search for Name but save ID?Rails:如何自动完成名称搜索但保存 ID?
【发布时间】:2012-11-06 17:42:49
【问题描述】:

我已使用此视频 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)} %> 

【问题讨论】:

标签: ruby-on-rails ruby ruby-on-rails-3 jquery-ui activerecord


【解决方案1】:

除了按照@LukasSvoboda 的建议进行操作外,您还可以覆盖select event 回调,当您从下拉列表中选择一个项目时会触发该回调。在回调中,您可以将文本字段(不需要提交)设置为所选项目的“标签”,并将游戏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

【讨论】:

  • 感谢您的回答。自动完成功能仍然有效,但之后的一切似乎都不起作用。搜索输入点击下拉后仍然显示值,隐藏输入没有获得值。奇怪的。就像自动完成后的一切都不起作用。没有 JS 错误 =\
  • 我的缩进有点不对劲,但我认为你已经解决了这个问题。您是否尝试在选择回调中放置警报以查看它是否至少触发了?
  • 是的,我修复了我的缩进。我清理了一堆其他的 JS,因为我发现其他地方的东西给我带来了一些问题。当我退回除 jquery 和 jquery UI 之外的所有内容时,我收到以下错误:“未捕获的 ReferenceError:未定义 ui”。超级奇怪,有什么想法吗?
  • 检查 $('#play_game_name').data('autocomplete-source') 是否返回有效的 json。如果没有,请尝试将.to_json 添加到Game.order(:name).map { |t| { :label =&gt; t.name, :value =&gt; t.id } 的末尾。
  • 我是个白痴,忽略我最后的评论。你的代码有效。非常感谢!
【解决方案2】:

通过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。

【讨论】:

  • 非常感谢您的回答!一些注意事项:您的代码中缺少 } (不是问题,在我的最后修复了它)。您的解决方案有效,但 ID 显示在自动完成后的输入中。是否有一种简单的方法来显示游戏名称并提交 ID,而用户永远不会看到 ID 号?
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-12-05
  • 1970-01-01
  • 2013-02-17
  • 2014-01-05
相关资源
最近更新 更多