2012-12-04 8 views
5

今、私はform_for.selectoptions_for_selectレールヘルパーを使用して、モデルからのデータを含む選択ボックスを作成しています。しかし、私が本当に必要なのはHTML5で導入された1つのようなコンボボックスである:RoR 3.2.8:HTML5コンボボックスヘルパーはありますか?

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

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

+0

が見えないこと、第二一目でちょっと待って有効なHTMLと同じように、あなたは正しいのでしょうか? – Noz

+0

@CyleHunter W3Cは、その有効な –

答えて

4

ありませんが、それは、このような結果を達成するために、独自のフォームビルダヘルパーメソッドセットアップに非常に簡単です、簡単な例は次のようになります。

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

+0

はそれがとても簡単かもしれないことを知らなかったと言います、それを試してみましょう。 –

+0

フォームとモデルのパラメータを渡すにはどうしたらいいですか? form_for.fieldを作成するときに、名前とIDを構築する方法を知っているように、 –

+1

を参照してください。http://stackoverflow.com/questions/7238798/adding-a-method-to-formbuilder-that-c​​alls-a-helper- method-that-renders-a-partial独自のFormBuilderサブクラスを作成して使用するか、Rubyのメタプログラミングを使用してFormBuilderにモンキーパッチを適用する必要があります。私は前者がそれをするのが好ましい方法だとはかなり確信していますが、どちらもうまくいくはずです。デフォルトのフォームビルダの代わりに新しいFormBuilderを使用するように、アプリケーション内のform_forをオーバーライドすることができます。そのため、多くのコードを変更する必要はありません。 – mrbrdo

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} 
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| %>

関連する問題