2012-12-04 13 views
5

In questo momento, sto utilizzando gli helper dei binari form_for.select e options_for_select per creare una casella di selezione con i dati del modello. Tuttavia, ciò che ho veramente bisogno è una casella combinata come quello introdotto con HTML5:RoR 3.2.8: Esiste un helper combobox HTML5?

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

C'è un aiutante rotaie per la creazione di questi elementi?

+0

Aspetta un secondo su un secondo sguardo, che non sembra come HTML valido, sei sicuro che sia giusto? – Noz

+0

@CyleHunter W3C dice che il suo valido –

risposta

4

No, ma è abbastanza facile da configurare il proprio metodo di modulo di costruttore di supporto per raggiungere un tale risultato, un semplice esempio potrebbe essere:

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 

dopo aver riavviato il server, è possibile implementare la nuova casella combinata utilizzando il costruttore di form specificando un argomento costruttore nella chiamata form_for:

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

uscita:

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

Tenete a mente che sia in IE & Safari non offrono il supporto per HTML5 Datalist.

+0

non sapeva che potrebbe essere così semplice, lasciatemi fare un tentativo. –

+0

Come posso passare i parametri del modulo e del modello? come quando costruisci un form_for.field sa come costruire il nome e l'identificativo –

+1

Guarda http://stackoverflow.com/questions/7238798/adding-a-method-to-formbuilder-that-calls-a-helper- method-that-makes-a-partial È necessario creare la propria sottoclasse di FormBuilder e utilizzarla, oppure è possibile creare una patch di scimmia con FormBuilder usando la metaprogrammazione di Ruby. Sono abbastanza sicuro che il primo è il modo migliore per farlo, ma entrambi dovrebbero funzionare. Nella tua app potresti sovrascrivere form_for per utilizzare il tuo nuovo FormBuilder al posto di quello predefinito, quindi non hai bisogno di cambiare molto codice. – mrbrdo

0

solo esempio dal mio codice:

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

Si consiglia inoltre di fare distinti:

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