상단고정 검색바 구현

기여·2024년 8월 23일
0

소소한 개발팁

목록 보기
84/103

특정 테이블을 담는 페이지 내에서 검색하는 것은 아닌, 모든 페이지에서 상단고정된 검색바를 통한 검색하는 기능이다.

Vo

// 검색용
	private String searchCdt;
	private String searchKw;

Mapper는 xml파일 쓰지 않으니 검색을 위한 class가 별도로 필요했다.
PrdSqlProvider

public class PrdSqlProvider {
	
	public String buildSeachPrdQuery(Map<String, Object> params) {
        String searchCdt = (String) params.get("searchCdt");
        String searchKw = (String) params.get("searchKw");

        StringBuilder query = new StringBuilder();
        query.append("SELECT * FROM products WHERE 1=1 ");

        if (searchCdt != null && searchKw != null && !searchCdt.isEmpty() && !searchKw.isEmpty()) {
            query.append("AND ").append(searchCdt)
                 .append(" LIKE CONCAT('%', #{searchKw}, '%') ");
        }

        query.append("ORDER BY product_code DESC");
        return query.toString();
    }

}

Mapper

//상품 검색
		@SelectProvider(type = PrdSqlProvider.class, method = "buildSeachPrdQuery")
	    List<PrdVo> seachPrd(@Param("searchCdt") String searchCdt, 
	                         @Param("searchKw") String searchKw);

Ctrl
method는 get 아닌 post 쓰게 된다.

@PostMapping("seachPrd") //상품 검색
	public String seachPrd(@RequestParam (value = "searchCdt", defaultValue = "pname", required = false) String searchCdt,
			@RequestParam (value = "searchKw", defaultValue = "", required = false) String searchKw,
			Model model) {
		System.out.println("seachPrd");		
				
		List<PrdVo> li=prdSvc.seachPrd(searchCdt, searchKw);	
		model.addAttribute("li", li);
		model.addAttribute("lisize", li.size());
		
		System.out.println("조건: " + searchCdt + " / 검색어: " + searchKw + " / 건수: "+ li.size());
		
		return "prd/seachPrdResult";
	}

form

					<form action="/prd/seachPrd" method="post">
				     <select name="searchCdt">
				         <option value="pname">pname</option>
				         <option value="category">category</option>
				         <option value="pprice">pprice</option>
				     </select>
				
				     <input type="text" name="searchKw" placeholder="검색어 입력" class="search">
				      
					<button type="submit" class="iconBtn">
						<span class="material-symbols-outlined">search</span>
					</button>
				</form>

결과 페이지:

<h1 th:text="'seachPrdResult (' + ${lisize} + '건)'"></h1>
<!-- 반복문 -->
profile
기기 좋아하는 여자

0개의 댓글