상품 검색 기능 만들기

이제 백에서 데이터를 받아올 수 있으니 js 파일에서 ajax를 사용해 append로 가져와보자

 

우선 execSearch, addHTML 함수 만들기

 

static > basic.js > function execSearch()

function execSearch() {
    /**
     * 검색어 input id: query
     * 검색결과 목록: #search-result-box
     * 검색결과 HTML 만드는 함수: addHTML
     */
    // 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){ //itemDto 의 List 가 response 안에 들어있는걸 받아온다.
            for (let i=0; i<response.length; i++){
                let itemDto = response[i]; //itemDto 안에는 하나 하나의 값이 들어있다.
                let tempHtml = addHTML(itemDto); //addHTML 로 itemDto를 받아온다.
                $('#search-result-box').append(tempHtml); // #search-result-box 검색 결과를 감싸고 있는 영역
            }
        }
    })
    // 4. for 문마다 itemDto를 꺼내서 HTML 만들고 검색결과 목록에 붙이기!

}

static > basic.js > addHTML(itemDto)

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">
                    ${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>`
}

여기까지 작성하고 서버를 띄운 후 localhost:8080 으로 확인해보면

짜잔~ 상품 검색이 화면에서 보여진다. 여기서 두가지 문제를 해결해보자

 

1. 처음에 HTML에 남아있는 첫번째 search-result-box를 empty로 지워보자.

 

function execSearch() 에서

$('#search-result-box').empty();

함수의 시작부분에 추가를 하면!

아이맥이 없어져야 하지만 브라우저에서 보면그대로 박스하나가 남아있다(?)

왜냐 하면 우리는 함수 내부에서 작성해줬기 때문에 검색을 했을때 사라진다.

처음에 있는 부분은 HTML에서 없애줘야 한다. 

 

 

2.  상단에 만들어둔 numberWithCommas 함수를 사용하여 금액단위를 보기 쉽게 콤마를 찍어주자.

 

function addHTML(itemDto) 에서

                <div class="price">
                    ${numberWithCommas(itemDto.lprice)}
                    <span class="unit">원</span>
                </div>