추가 (2020/06/10)

이 기사의 방법이라면, 실현할 수 있는 동작은 폼의 초기화(리셋)입니다.
완전하게 클리어(블랭크)로 하는 방법은 이쪽의 기사에서 소개하고 있습니다.

[Rails]ransack에서 고급 검색 양식을 만든 메모 쓰기

소개

다양한 검색 조건을 붙일 수 있는 검색 폼을 구현하고 있는 가운데, 검색 조건을 원 클릭으로 리셋할 수 있는 방법이 없는가라고 시행착오했습니다.

결과, 이하의 방법으로 실장할 수 있었으므로 정리합니다.

환경

Ruby2.5.1

Rails5.2.4

절차

개요를 간략하게 설명하면,
1. 도우미 메소드에 리셋 버튼 태그를 생성하는 메소드 정의
2. 뷰에서 호출
3. 체크 박스를 js로 클리어하는 처리를 작성한다
라는 3 개로 보내는 느낌입니다.

1. 도우미 메소드 정의

어느 파일이라도 좋지만, 이번은 helpers/application.rb 에 정의합니다.

helpers/application.rb

module ApplicationHelper
  def reset_tag(value = "Reset form", options = {})
    options = options.stringify_keys
    tag :input, { type: "reset", value: value }.update(options)
  end
end

2. 뷰 파일에서 호출

search.html.haml

%div
  = reset_tag 'クリア', id: 'js_clear_btn'
%div
  = f.submit '完了'

본래 Rails 에 reset_tag 는 없습니다만 , 헬퍼 메소드로 정의했으므로 , 이 쓰는 방법으로 호출할 수 있습니다.

CSS도 조정해 이런 느낌으로↓

3. 체크 박스를 JavaScript로 클리어하는 기술

내 경우에는 재설정 버튼이라면 체크 박스를 지울 수 없었기 때문에 자바 스크립트를 작성했습니다.

코드는 환경에 크게 의존하기 때문에, 할애합니다.

결과

이런 식으로 text_field도 number_field도 select도 checkbox도 모두 초기화하는 버튼을 만들 수 있었습니다!

참고

양식을 초기화하는 버튼을 Rails에서 사용