나만의셀렉샵) 상품 검색 기능 만들기

- execSearch 함수

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} 요청
    $.ajax({
    	type: "GET",
        url: `/api/search?query=${query}`,
        success: function(response) {
            // 4. for 문마다 itemDto를 꺼내서 HTML 만들고 검색결과 목록에 붙이기!
            for(let i=0; i<response.length; i++) {
            	let itemDto = response[i];
            	let tempHtml = addHTML(itemDto);
                $("#search-result-box").append(tempHtml);
            }
            
        }
    });

}

 

- addHtml 함수

addProduct(${JSON.stringify(itemDto)}) : 

매개변수에는 JSON 형태가 아닌 문자열이 들어가야 함

그래서 JSON.stringify() 로 변환을 시켜줌

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)})'>
        </div>
    </div>`;
}