스터디 목록 제목 검색 및 Ajax 자동완성 기능 구현

1. 기능 개요

스터디 목록 페이지에서 사용자가 스터디 제목을 입력하면 실시간으로 추천 목록이 나타나도록 Ajax 기반 검색 자동완성 기능을 구현했다.

검색 기능은 두 가지 방식으로 구성했다.

• 입력 중: Ajax 자동완성
• 엔터 또는 검색 버튼: 기존 submit 방식 전체 검색

Ajax는 사용자 경험 개선을 위한 자동완성 용도로만 사용하고,

실제 검색 결과 페이지 이동은 기존 컨트롤러 로직을 그대로 유지했다.

2. JSP 구조

검색 폼

<form name="studySearchForm" action="studyList.do">

사용자가 검색 버튼 또는 엔터를 누르면 studyList.do로 이동하며 기존 페이징 로직과 연동된다.

입력 이벤트

<input type="text" name="studyFind" onkeyup="studySearch()">

키 입력 시마다 Ajax 요청을 보내 자동완성 데이터를 받아온다.

추천 리스트 출력 영역

<div id="findList"></div>