소개

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 로 해 두지 않으면
한 번 입력하고 그 후 지운 항목도 선택하러 나와 보기 힘들어진다.