はじめに
- M3Cアドベントカレンダー25日目です。
- ゲームは買いません。
追加も選択もできるIF
例えば、家計簿アプリなどで、
マスターのリストから選択する品物を選択するが、
品物がマスターにない場合は追加できる というIFを作りたいときがある。
既存のリストから選択する場合と、リストにないものを入力する場合でフォームを分ければ楽なのだがユーザビリティは良くない。あれば選ぶなければそのまま追加という風にしたい。
そういう場合はHTML5で追加されたdatalistをつかえばいいそうな。
datalistは中にoptionタグを複数持つタグで、datalistにつけたidを
テキストフィールドの list属性で指定すると「あればリストから選び、なければ入力する」入力欄を作れる。
Railsでヘルパーにする
ヘルパーに定義
application_helpler.rb
def datalist_tag(name, value, datalist, options={})
id = "#{name}-#{Random.new.rand}"
options.merge!({
list: id
})
html=<<-EOS
<%= text_field_tag(name, value, options) %>
<datalist id="#{id}">
<% datalist.each do |name| %>
<option value="<%= name %>">
<% end %>
</datalist>
EOS
ERB.new(html).result(binding).html_safe
end
viewで呼び出す。
<%= datalist_tag('item[name]', nil, @data_list, autocomplete: 'off') %> %>
@data_list
には選択肢に表示したいデータを配列で渡す。
簡単家計簿
datalist_tag
を使って簡単家計簿を作る。
datalistのテキストフィールド部分は autocomplete=off
にしておかないと
一度入力してその後消した項目も選択しに出てきて見づらくなる。