ajax 검색기능 구현하기

검색할 필드명이 담긴 select와

검색할 텍스트명이 담길 input, 

검색을 실행할 button을 작성한다.

${paramMap.selectField}
<select name="selectField" class="category form-select m-width-fit-content">
	<option value="NAME">이름</option>
	<option value="SKILLS">스킬</option>
</select> 

<input id="search" type="search" name="searchText" placeholder="검색어를 입력해주세요." value="${paramMap.searchText}"/>
<button type="button" onclick="searchMpList();"><img src="/images/search.svg" alt="검색"></button>

 

 

 

각 select와 input의 값을 가져와 이미 작성된 리스트 페이지에 넘겨보도록하자.

성공시 원하는 영역을 업데이트하고, 실패시 에러를 발생시킬것이다.

<script type="text/javascript">
    function searchMpList(){
	var selectField = $("select[name='selectField']").val();
    var searchText = $("input[name='searchText']").val();

    $.ajax({
        type: "GET",
    url: "/manpower/manpower_main",
    data: {
        "selectField": selectField,
    	"searchText": searchText
            },
    success: function (response) {
        $("#container").html(response);
     	},
    error: function (error) {
        alert("에러가 발생했습니다.");
       }
                 });
	}
</script>

https://standout.tistory.com/1132

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

 

 

 

넘겨받은 값은 Map에 담아 service단으로 넘기고 쿼리를 실행하며, 

실행결과 리스트와 검색조건을 mv에 add하여 리턴한다.

@RequestMapping(value = "/manpower_main", method = { RequestMethod.GET })
	public ModelAndView manpowerMain(
			@RequestParam(value = "selectField", required = false) String selectField,
            @RequestParam(value = "searchText", required = false) String searchText, 
            HttpServletRequest req,
			HttpServletResponse res) {
		ModelAndView mav = new ModelAndView();
		
		Map<String, Object> paramMap = new HashMap<>();
		paramMap.put("selectField", selectField);
		paramMap.put("searchText", searchText);
		
		List<MpVO> selectMpList = mpService.selectMpList(paramMap);
		mav.setViewName("/manpower/manpower_main");
		mav.addObject("selectMpList", selectMpList);
		
		mav.addObject("paramMap", paramMap);
		return mav;
	}

public List<MpVO> selectMpList(Map<String, Object> paramMap) { 	
			return mpMapper.selectMpList(paramMap);
		}

public List<MpVO> selectMpList(Map<String, Object> paramMap);

<select id="selectMpList" resultMap="mpVOResultMap" parameterType="map">
		    SELECT * FROM emp_info 
		    <if test="searchText != null and searchText != ''">
		        WHERE LOWER(${selectField}) LIKE LOWER(CONCAT('%', #{searchText}, '%'))
		    </if>
		    <if test="searchText == null or searchText == ''">
		    </if> 
		</select>

 

 

 

ajax가 아닌 url에 파라미터를 담아 검색기능을 구현할 수도 있다.

https://standout.tistory.com/1137

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