[Spring] 검색 기능 구현하기

스프링으로 검색기능 구현하기

 

🩸이슈 발생

스프링 검색 기능 구현해보기

1. DB 구조 : TBL_SEARCH_RESULT
2. 검색 전 페이지 JSP
3. Mapper.xml
4. DAO
5. Service
6. ServiceImpl
7. Controller
8. 검색결과 페이지 JSP

 

728x90

---

🩹이슈 해결

 

1. DB 구조 : TBL_SEARCH_RESULT

SEARCH_KEYWORD 로 검색 시 KEYWORD_TITLE을 기준으로 검색 내용이 나오게 구현했다.

 

 

2. 검색 전 페이지 JSP

(1) html

<div class="SearchController_keyword__3FcFo">
    <input name="SEARCH_KEYWORD" class="search-keyword" type="text" value="${SEARCH_KEYWORD}" placeholder="어떤 정보를 찾고 계신가요?">
    <button onclick="fn_searchSubmit(event)" class="SearchController_searchIcon__Zhy7F">
        <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 20 20" fill="none">
          <g clip-path="url(#clip0_1592_5522)">
            <path d="M12.9167 11.6667H12.2583L12.025 11.4417C12.8417 10.4917 13.3333 9.25833 13.3333 7.91667C13.3333 4.925 10.9083 2.5 7.91667 2.5C4.925 2.5 2.5 4.925 2.5 7.91667C2.5 10.9083 4.925 13.3333 7.91667 13.3333C9.25833 13.3333 10.4917 12.8417 11.4417 12.025L11.6667 12.2583V12.9167L15.8333 17.075L17.075 15.8333L12.9167 11.6667ZM7.91667 11.6667C5.84167 11.6667 4.16667 9.99167 4.16667 7.91667C4.16667 5.84167 5.84167 4.16667 7.91667 4.16667C9.99167 4.16667 11.6667 5.84167 11.6667 7.91667C11.6667 9.99167 9.99167 11.6667 7.91667 11.6667Z" fill="#6C6F75"/>
          </g>
          <defs>
            <clipPath id="clip0_1592_5522">
              <rect width="40" height="40" fill="white"/>
            </clipPath>
          </defs>
        </svg>
    </button>
</div>

(2) JS 

$(document).ready(function(){

    $("input[name=SEARCH_KEYWORD]").on("keypress", function() {
        if( event.keyCode == 13 ) {
            fn_searchSubmit();
        }
    });
    $("input[name=SEARCH_KEYWORD]").attr("ime-mode", "active");
    $("input[name=SEARCH_KEYWORD]").focus();
    $("input[name=SEARCH_KEYWORD]").select();

});


function fn_searchSubmit(){

    var SEARCH_KEYWORD = $("input[name=SEARCH_KEYWORD]").val();

    if(SEARCH_KEYWORD == ""){
        alert('검색어를 입력해주세요.');
        return;
    }

    var comSubmit = new ComSubmit();
    comSubmit.addParam("SEARCH_KEYWORD",$("input[name=SEARCH_KEYWORD]").val());
    comSubmit.setUrl('/m/searchResult.do');
    comSubmit.submit();

}

* comSubmit 사용을 위한 common.js 파일이 필요하다

 

3. Mapper

<mapper namespace="keyword">
    <select id="selectKeywordList" parameterType="hashmap" resultType="hashmap">
        <![CDATA[
            SELECT
                IN_SEQ,
                SEARCH_KEYWORD,
                KEYWORD_TITLE,
                KEYWORD_CONTENT,
                KEYWORD_IMAGE,
                KEYWORD_LINK,
                KEYWORD_LIKE
            FROM
                TBL_SEARCH_RESULT
        ]]>
        <if test="SEARCH_KEYWORD != null and SEARCH_KEYWORD != '' ">
            WHERE SEARCH_KEYWORD LIKE CONCAT('%', CONCAT(#{SEARCH_KEYWORD}, '%'))
        </if>
    </select>
</mapper>

 

4. DAO

@Repository("keywordDAO")
public class KeywordDAO extends AbstractDAO{

    @SuppressWarnings("unchecked")
    public List<Map<String, Object>> selectKeywordList(Map<String, Object> map) throws Exception{
        return (List<Map<String, Object>>)selectList("keyword.selectKeywordList", map);
    }

}

 

5. Service

public interface KeywordService {

    List<Map<String, Object>> selectKeywordList(Map<String, Object> map) throws Exception;

}

 

6. ServiceImpl

@Service("keywordService")
public class KeywordServiceImpl implements KeywordService{

    Logger log = Logger.getLogger(this.getClass());

    @Resource(name="keywordDAO")
    private KeywordDAO keywordDAO;

    @Override
    public List<Map<String, Object>> selectKeywordList(Map<String, Object> map) throws Exception {
        return keywordDAO.selectKeywordList(map);
    }
	
}

 

7. Controller

@RequestMapping(value = "/m/searchResult.do")
    public ModelAndView searchDetailList(CommandMap commandMap, HttpServletRequest request) throws Exception {
        ModelAndView mv = new ModelAndView("/m/search_detail_list");

        // 검색 전체결과
        mv.addObject("SEARCH_KEYWORD", commandMap.get("SEARCH_KEYWORD"));
        List<Map<String, Object>> searchResult = keywordService.selectKeywordList(commandMap.getMap());
        mv.addObject("searchResult", searchResult);

        return mv;
    }

 

 

8. 검색 결과 페이지 JSP

<div class="search-container">
    <c:forEach var="data" items="${searchResult}" varStatus="status">
        <div class="card-container">
            <a class="card-content" href="${data.KEYWORD_LINK}">
                <img class="thumbnailBox" alt="" src="${data.KEYWORD_IMAGE}"> 
                <div class="infoBox">
                    <strong>${data.KEYWORD_CONTENT}</strong>
                    <p>${data.KEYWORD_TITLE} </p>
                    <span>
                        ❤
                        ${data.KEYWORD_LIKE}
                    </span> 
                </div>
            </a>
        </div>
    </c:forEach>
    <c:if test="${empty searchResult}">
        <div class="infoBox">
            <strong>검색 결과가 없습니다.</strong>
        </div>
    </c:if>
</div>

 

 

'안녕하세' 만 검색해도 '안녕하세요'에 문자열 포함되어있기때문에 검색결과에 출력된다.