RoR 3.2.8：有 HTML5 组合框助手吗？答案

【问题标题】：RoR 3.2.8: Is there an HTML5 combobox helper?RoR 3.2.8：有 HTML5 组合框助手吗？
【发布时间】：2012-12-04 21:12:28
【问题描述】：

现在，我正在使用 form_for.select 和 options_for_select rails 帮助器来创建一个包含模型数据的选择框。但是，我真正需要的是一个类似于 HTML5 引入的组合框：

<input type=text list=browsers >
<datalist id=browsers >
   <option> Google
   <option> IE9
</datalist>

是否有用于创建此类元素的 rails 助手？

【问题讨论】：

稍等一下，这看起来不像是有效的 HTML，你确定这是对的吗？
@CyleHunter W3C 说它有效

标签： ruby-on-rails ruby-on-rails-3 html

【解决方案1】：

不，但是很容易设置自己的表单构建器帮助方法来实现这样的结果，一个简单的例子是：

app/form_builders/combobox_form_builder.rb

 class ComboboxFormBuilder < ActionView::Helpers::FormBuilder
  include ActionView::Context # for nested content_tag
  include ActionView::Helpers::FormTagHelper #for sanitize_to_id method access

  def combobox_tag(name, options, opts= {})
     @template.content_tag(:input, :name => name, :id => sanitize_to_id(name), :type => "text", :list => opts[:list_id]) do
       content_tag(:datalist, :id => opts[:list_id]) {options}
     end    
  end    
end

重新启动服务器后，您可以通过在 form_for 调用中指定构建器参数来使用表单构建器来实现新的组合框：

<%= form_for @foo, builder: ComboboxFormBuilder do |f| %>
    <%= f.combobox_tag(:browser, options_for_select(["Firefox", "Chrome", "IE9"]), :list_id => "list")%>
<% end %>

输出 HTML：

<input type="text" name="browser" list="list" id="browser">
<datalist id="list">
  <option value="Firefox">Firefox</option>
  <option value="Chrome">Chrome</option>
  <option value="IE9">IE9</option>
</datalist>

请记住，IE 和 Safari 都不支持 HTML5 Datalist。

【讨论】：

没想到这么简单，让我试一试。
如何传递表单和模型参数？当你构建一个 form_for.field 时，它知道如何构建名称和 id
查看stackoverflow.com/questions/7238798/… 您需要创建自己的 FormBuilder 子类并使用它，或者您可以使用 Ruby 的元编程对 FormBuilder 进行猴子补丁。我很确定前者是首选的方法，但两者都应该有效。您可以在应用程序中覆盖 form_for 以使用新的 FormBuilder 而不是默认的，因此您不需要更改大量代码。
为了清楚起见再次更新，上面应该涵盖了您需要的几乎所有内容。如果您想进一步扩展您的组合框标签以更好地模拟其他表单构建器帮助方法，请参阅form tag helpers 参考。

【解决方案2】：

<%= form_for @person do |f| %>
  <%= f.label :first_name, "First Name" %>:
  <%= f.text_field :first_name, list: 'first-name' %>
  <datalist id="first-name">
    <% Person.all.each do |person| %>
      <option value="<%= person.first_name %>"></option>
    <% end %>
  </datalist>
  <%= f.submit %>
<% end %>

您可能还想区分：

<% Person.select(:first_name).distinct.each do |person| %>

【讨论】：

【解决方案3】：

只是我的代码中的示例：

= form_tag controller:'beer', action: 'create' do
  = text_field :beer, :name, list: 'beer-name'
  %datalist#beer-name
    - Beer.all.each do |beer|
      %option{value: beer.name}

【讨论】：