Hotwire Combobox를 이용한 다중 선택 기능 구현은 다음 주요 단계를 통해 진행되었습니다.
1. 자동 완성 및 다중 선택 구현
speakers_search액션과async_combobox_options헬퍼로 강연자 이름 검색 및 자동 완성을 구현했습니다.form.combobox에multiselect_chip_src옵션을 추가하고,speakers_search_chips액션에서combobox_selection_chips_for헬퍼를 활용하여 선택된 강연자들을 칩 형태로 표시, 다중 선택 기능을 활성화했습니다. Hotwire Combobox의test/dummy앱 예제를 참고했습니다.
2. 자유 텍스트 입력 및 신규 강연자 처리
form.combobox에name_when_new와free_text: true옵션을 설정하여 새로운 강연자 직접 입력을 지원했습니다.speakers_search_chips액션에서params[:combobox_values]처리 시, ID로 Speaker 모델을 찾지 못하면OpenStruct객체를 생성하여 자유 텍스트 입력을 모델처럼 다루도록 매핑했습니다.
3. Combobox 값 제어 및 YAML 매핑
- 최종 YAML에 강연자 이름이 필요했으므로,
async_combobox_options헬퍼에value: proc { |element| element.name }옵션을 추가했습니다. - 이를 통해 Combobox 숨겨진 입력 필드에 ID 대신 이름이 저장되도록 하여, 컨트롤러에서 추가 매핑 없이 원하는 데이터를 직접 얻을 수 있었습니다.