5

現在、form_for.selectand options_for_selectrailsヘルパーを使用して、モデルのデータを含む選択ボックスを作成しています。ただし、私が本当に必要としているのは、HTML5で導入されたようなコンボボックスです。

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

そのような要素を作成するためのRailsヘルパーはありますか？

4

3 に答える 3

4

いいえ。ただし、このような結果を達成するために独自のフォームビルダーヘルパーメソッドを設定するのは非常に簡単です。簡単な例は次のとおりです。

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データリストのサポートを提供していないことに注意してください。

于 2012-12-04T21:39:41.427 に答える
1 
<%= 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| %>

于 2014-08-06T15:07:18.967 に答える
0

私のコードからの単なる例：

= 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}
于 2014-01-05T23:52:18.320 に答える