한 페이지 내에 검색창과 입력창을 동시에 구현하는 방법이 궁금합니다.

Question

아래 그림과 같이 한 화면에 검색창과 입력창을 동시에 구현하는 방법에 관해 조언을 구하고 싶습니다. 위쪽이 input form이고 아래쪽이 검색창입니다. 사용자가 값을 입력하는 중 자료를 검색하여 그 결과를 참고해서 입력할 수 있도록 구현하고자 합니다. GET 방식으로 검색기능을 구현했을 때, 검색이 되면 그동안 사용자가 입력하던 텍스트가 사라집니다. 사용자가 입력하고 있던 값들도 그대로 유지한 채 사용자가 중간중간 검색을 하면서 값을 입력하고 최종적으로 한 번에 저장할 수 있도록 하는 방법이 있을까요? 답변 기다리겠습니다. 감사합니다.

이진석 · Answer

안녕하세요. 보여주신 스크린샷에서 의도하신 UI가 명확히 이해를 못한 듯 하지만, 제가 이해한 만큼 설명을 드리자면. 검색을 하고, 검색결과 중에 한 행(Row)을 선택해서, 그 행의 내역을 입력 Form에 포함시켜서 전송하고 싶다. 로 이해했습니다. 검색 기능과 입력 Form의 기능을 따로 나눠서 생각하셔야 합니다. 엄연히 다른 기능이니깐요. 1) 검색 기능에서는 단순히

으로만 구현하시면 매 검색 시마다 페이지가 다시 그려집니다. 이는 의 기능 동작입니다. 페이지가 다시 그려지지 않도록 할려면, 검색의 submit 동작을 javascript로 처리해주셔야 합니다. 해당 form 에 submit 이벤트에 대한 이벤트 리스너를 거실 수 있구요. submit 이벤트가 발생하면, Ajax 로 검색요청을 하시고 응답을 받아서, javascript로 검색결과를 화면에 반영합니다. 이 부분은 htmx 라이브러리를 쓰시면, javascript 코드를 최소화해서 구현하실 수 있지만 htmx에 대한 학습이 필요하긴 합니다. 이에 대해서는 영어 유튜버지만 BugBytes 채널 을 참고해보시면 좋습니다. https://www.youtube.com/playlist?list=PL-2EBeDYMIbRByZ8GXhcnQSuv2dog4JxY 2) 입력 Form에서는 검색에서 선택한 행에 대한 값을 전송할 수 있도록 input[type=hidden] 필드를 하나 준비해두고, 검색에서 행을 선택하면 해당 hidden 필드의 .value 속성을 업데이트하는 방식으로 구현해보실 수 있습니다. 살펴보시고, 추가 질문 남겨주세요. 토론하며 더 발전시켜나가보시죠. 화이팅입니다. :-)