はじめに

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 にしておかないと
一度入力してその後消した項目も選択しに出てきて見づらくなる。