검색 화면 구현시 select태그 사용

검색 화면 구현 부분이다.

실제 구현 하면 아래와 같음

<!-- 검색 화면 -->	                                                                                                           
<div class="row">                                                                                                             
	<div class="col-lg-12">                                                                                                   
		<form id="searchForm" action="/controller/board/list" method="get">                                                   
			<select name="type">                                                                                              
				<option value="" <c:out value="${pageMaker.cri.type == null ? 'selected':'' }"/> >--</option>                 
                <option value="T" <c:out value="${pageMaker.cri.type eq 'T' ? 'selected':'' }"/> >제목</option>                 
                <option value="C" <c:out value="${pageMaker.cri.type eq 'C' ? 'selected':'' }"/> >내용</option>                 
                <option value="W" <c:out value="${pageMaker.cri.type eq 'W' ? 'selected':'' }"/> >작성자</option>                
                <option value="TC" <c:out value="${pageMaker.cri.type eq 'TC' ? 'selected':'' }"/> >제목 or 내용</option>         
                <option value="TW" <c:out value="${pageMaker.cri.type eq 'TW' ? 'selected':'' }"/> >제목 or 작성자</option>        
                <option value="TWC" <c:out value="${pageMaker.cri.type eq 'TWC' ? 'selected':'' }"/> >제목 or 내용 or 작성자</option>
			</select>                                                                                                         
			<input type="text" name="keyword" value="<c:out value="${pageMaker.cri.keyword}"/>" />                            
			<input type="hidden" name="pageNum" value="<c:out value="${pageMaker.cri.pageNum}"/>" />                          
			<input type="hidden" name="amount" value="<c:out value="${pageMaker.cri.amount}"/>" />                            
			<button class="btn btn-default">Search</button>                                                                   
		</form>                                                                                                               
	</div>                                                                                                                    
</div> 


<script type="text/javascript">

$(document).ready(function() { 
var searchForm = $("#searchForm");                                         
$("#searchForm button").on("click", function(e) {                          
	                                                                       
	if (!searchForm.find("option:selected").val()) {                       
		alert("검색 종류를 선택하세요");                                             
		return false;                                                      
	}                                                                      
	                                                                       
	if (!searchForm.find("input[name='keyword']").val()) {                 
		alert("키워드를 입력하세요");                                               
		return false;                                                      
	}                                                                      
	                                                                       
	searchForm.find("input[name='pageNum']").val("1");                     
	e.preventDefault();                                                    
	                                                                       
	searchForm.submit();                                                   
}); /* $("#searchForm button").on("click", function(e) { end*/
});/* ready end function end */

</script>            

이해하는데 약간 시간이 걸린 부분이고 놓치기 쉬운 부분이라 기록으로 남김

일단 위 소스의 중점은 페이지가 이동해도 현재 선택한 옵션, 키워드 등이 유지되어야 한다는것이 포인트임

또한 selected키워드를 c:out액션 태그와 함께 어떻게 써야하는지 잘 보여줌

​

또한 검색버튼 눌렀을떄 이벤트 처리도 자바스크립트로 구현해 놓은 부분을 잘 참고하기 바람

적용된 로직은 검색 종류가 선택이 안되있을시 경고 추가

키워드 없을시 경고 추가

검색시 page 1로 변경

버튼 기본기능 제한

​

​