现在,我正在使用form_for.select
和options_for_select
rails 助手来创建一个包含模型数据的选择框。但是,我真正需要的是一个类似于 HTML5 引入的组合框:
<input type=text list=browsers >
<datalist id=browsers >
<option> Google
<option> IE9
</datalist>
是否有用于创建此类元素的 rails 助手?
现在,我正在使用form_for.select
和options_for_select
rails 助手来创建一个包含模型数据的选择框。但是,我真正需要的是一个类似于 HTML5 引入的组合框:
<input type=text list=browsers >
<datalist id=browsers >
<option> Google
<option> IE9
</datalist>
是否有用于创建此类元素的 rails 助手?
不,但是很容易设置自己的表单构建器辅助方法来实现这样的结果,一个简单的例子是:
应用程序/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 @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| %>
只是我的代码中的示例:
= 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}