인프런 커뮤니티 질문&답변
작성한 질문수
한 페이지 내에 검색창과 입력창을 동시에 구현하는 방법이 궁금합니다.
작성
·
180
0
아래 그림과 같이 한 화면에 검색창과 입력창을 동시에 구현하는 방법에 관해 조언을 구하고 싶습니다.
위쪽이 input form이고 아래쪽이 검색창입니다.
사용자가 값을 입력하는 중 자료를 검색하여 그 결과를 참고해서 입력할 수 있도록 구현하고자 합니다.
GET 방식으로 검색기능을 구현했을 때, 검색이 되면 그동안 사용자가 입력하던 텍스트가 사라집니다.
사용자가 입력하고 있던 값들도 그대로 유지한 채 사용자가 중간중간 검색을 하면서 값을 입력하고 최종적으로 한 번에 저장할 수 있도록 하는 방법이 있을까요?
답변 기다리겠습니다.
감사합니다.
답변 1
0
안녕하세요.
보여주신 스크린샷에서 의도하신 UI가 명확히 이해를 못한 듯 하지만, 제가 이해한 만큼 설명을 드리자면.
검색을 하고, 검색결과 중에 한 행(Row)을 선택해서, 그 행의 내역을 입력 Form에 포함시켜서 전송하고 싶다. 로 이해했습니다.
검색 기능과 입력 Form의 기능을 따로 나눠서 생각하셔야 합니다. 엄연히 다른 기능이니깐요.
1) 검색 기능에서는 단순히 <form method="get"> 으로만 구현하시면 매 검색 시마다 페이지가 다시 그려집니다. 이는 <form>의 기능 동작입니다. 페이지가 다시 그려지지 않도록 할려면, 검색의 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 속성을 업데이트하는 방식으로 구현해보실 수 있습니다.
살펴보시고, 추가 질문 남겨주세요.
토론하며 더 발전시켜나가보시죠.
화이팅입니다. :-)
감사합니다! htmx 활용하여 검색 기능을 다시 구현해보도록 하겠습니다 :)