MVC패턴 게시판 구현하기: 검색하기

앞서 게시물 리스트들을 표시해봤다.

https://standout.tistory.com/1132

MVC패턴 게시판 구현하기: 리스트페이지

 

 

이번엔 불러낸 리스트에서 ajax검색기능을 추가해보자.

초기화버튼은 파라미터가 없는 list.do로 기본세팅했고 svg형식으로 집어넣어봤다.

-이 아이콘 하나때문에 라이브러리를 연결하거나 이미지를 저장하고 싶지않았기 때문이다. - 

select박스와 검색버튼을 만들어놓자.

<form id="searchForm">
		<div id="searchArea" class="input-group mb-3">
		<a href="/board/list.do" class="btn border btn-light ms-2 d-inline ms-auto m-width-fit-content"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
  <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
  <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
</svg></a>
        
			<select name="selectField" class="category form-select m-width-fit-content">
				<option value="title">제목</option>
				<option value="text">내용</option>
			</select> 
            
            <label for="search" class="hidden">검색어 입력</label> <input
				class="form-control" type="text" name="searchText" id="search"
				placeholder="검색어를 입력하세요">

			<!-- 검색 버튼을 클릭 시 Ajax 요청 -->
			<button type="button" class="btn btn-light border" id="searchButton">검색</button>

			<a href="/board/sub.do" class="btn btn-dark ms-2 d-inline ms-auto">새
				글쓰기</a>
		</div>
	</form>

 

 

 

검색하기 버튼을 눌렀을때 select값과 input입력값을 가져와 파라미터에 추가해 새로고침한다.

<script>
$(document).ready(function() {
    // 검색 버튼 클릭 시
    $("#searchButton").click(function() {
        // 선택된 값과 입력된 값을 가져옴
        var selectField = $("select[name='selectField']").val();
        var searchText = $("input[name='searchText']").val();

        // URL에 파라미터 추가
        var newUrl = window.location.pathname + "?selectField=" + selectField + "&searchText=" + searchText;
	
        // 새로고침
        window.location.href = newUrl;
    });
});
</script>

 

 

 

전달받은 파라미터 값으로 필터링된 리스트를 가져올것이다.

//  리스트 + 리스트 검색 ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
	@RequestMapping(value = { "/", "/board/list.do" })
	public ModelAndView list(@RequestParam(value = "selectField", required = false) String selectField,
	                          @RequestParam(value = "searchText", required = false) String searchText) {
		
		// 전체 게시물 수 가져오기
	    int totalRecords = boardService.totalList(selectField, searchText);
	  
		ModelAndView mv = new ModelAndView();
		mv.setViewName("/board/list");
		
		// 특정 페이지에 대한 게시물 가져오기
		List<BoardVO> list= boardService.list(selectField, searchText);
		
		mv.addObject("list", list);
        
		return mv;
}

<select id="search" resultMap="boardResult">
	<![CDATA[
		SELECT * FROM board
		WHERE LOWER(#{search_field}) LIKE LOWER('%#{search_text}%');
	]]>
	</select>

 

 

완료.