[스파르타 웹개발의 봄 spring] 04.11 상품 검색 기능 만들기

##execSearch, addHTML 함수 만들기

: execSearch : html 검색창에서 검색어 가져와서 네이버 검색api 실행 후 응답된 List<itemDto> 상품목록을 addHTML로 웹에 상품제목,사진,최저가 포함한html 추가

:addHTML : 상품정보를 저장한 itemDto를 받아서 html안에 제목,가격,사진만 변수로 바꾸면서 html 코드 반환

-주의: 관심상품을 등록시키는 addProduct함수안에 JSON형태인 itemDto를 그대로 인자로 넣으면 에러->json문자열로 변환 후 인자로 넘겨줌

 

 
function execSearch() {
    /**
     * 검색어 input id: query
     * 검색결과 목록: #search-result-box
     * 검색결과 HTML 만드는 함수: addHTML
     */
    $('#search-result-box').empty(); // 기존 검색어 지움
    // 1. 검색창의 입력값을 가져온다.
    let query = $('#query').val();
    // 2. 검색창 입력값을 검사하고, 입력하지 않았을 경우 focus.
    if(query == ' ') {
        alert("검색어를 입력하세요."); // 경고문
        $('#query').focus(); //
    }
    // 3. GET /api/search?query=${query} 요청
    // 4. for 문마다 itemDto를 꺼내서 HTML 만들고 검색결과 목록에 붙이기!
    $.ajax({
        type:"GET",
        url: `/api/search?query=${query}`,
        success: function (response){ // List<ItemDto> 로 응답 받음
            for(let i=0;i<response.length;i++){
                let itemDto = response[i];
                let tempHtml = addHTML(itemDto); // itemDto 내용을 html로 변환
                $('#search-result-box').append(tempHtml); // 변환된 html 추가
            }
        }
    })
 
 
}
 
function addHTML(itemDto) {
    /**
     * class="search-itemDto" 인 녀석에서
     * image, title, lprice, addProduct 활용하기
     * 참고) onclick='addProduct(${JSON.stringify(itemDto)})'
     */
    return `<div class="search-itemDto">
            <div class="search-itemDto-left">
                <img src="${itemDto.image}" alt=""> <!--상품 이미지-->
            </div>
            <div class="search-itemDto-center">
                <div>${itemDto.title}</div>  <!--상품이름 출력-->
                <div class="price">
                   ${numberWithCommas(itemDto.lprice)} <!-- 최저가 콤마 찍어서 출력-->
                    <span class="unit">원</span>
                </div>
            </div>
            <div class="search-itemDto-right">
                <img src="images/icon-save.png" alt="" onclick='addProduct(${JSON.stringify(itemDto)})'><!--addProduct에 문자열 형태로 넣어줘야 함-->
            </div>
        </div>`
}