1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

エムスリーキャリアAdvent Calendar 2019

Day 25

datalist_tag(追加もできるセレクトボックス)をヘルパーに追加する。

Last updated at Posted at 2019-12-24

はじめに

追加も選択もできる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 を使って簡単家計簿を作る。

kantankakeibo.gif

datalistのテキストフィールド部分は autocomplete=off にしておかないと
一度入力してその後消した項目も選択しに出てきて見づらくなる。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?