2-3. API 정보를 검색창 처럼 구현하기, 검색창 자동완성

---

2편링크

jae04099.tistory.com/81?category=885836

2-2. Flask, Ajax로 Open API 통신하기

시리즈 순서

 

1. 적절한 api 찾기

2. 찾은 api 원하는 정보만 ajax를 이용해서 콘솔에 출력하기

3. html로 검색창을 만들어 원하는 정보 출력시키기

4. 그 외 조정사항

변동가능

 

저번 편에서 우리는 찾은 api에서 원하는 정보만 추출해 콘솔에 출력을 해 보았다.

이제 실제로 콘솔이 아닌 소비자가 이용할 수 있게 html 화면으로 만들어보자.

---

목표

위와 비슷하게 구현 할 것이다.

구글이나 네이버 등 포털사이트의 검색창에 검색을 할 때, 원하는 키워드가 들어간 연관 검색어들이 연속해서 표처럼 출력되곤 한다.

이와 비슷하게 출력이 되도록 만들어 보자.

---

준비

저번 시간부터 사용했던 파이썬 가상환경이 구성된 API_PRAC 폴더를 준비한다.

필요한 파일은

• app.py
• song-search.html 

---

localhost:5000의 주소를 가진 app.py의 서버를 실행시키면 아래와 같이 나온다.

그리고 아래의 입력창에 예를 들어 '소녀시대'를 검색하면 ajax success라는 경고창이 뜨고, 콘솔을 들어가보면 아래와 같이 리스트가 뜬다.

콘솔에 입력된 것 그대로 html로 받아 올 것이다. 

우선 샘플로 템플릿이 될 html 코드를 짜보자.

템플릿을 짜고, 해당 템플릿 안에 데이터를 반복문을 통해서 복사 하는 원리이다.

<div class="musicListList">
        <ul class="musicList">
            <li class="title">GEE</li>
            <li class="artist">소녀시대</li>
        </ul>
</div>
 

위의 태그를 적용하면 아래와 같이 나온다.

이제 api 데이터를 받아 붙여보자.

검색 버튼을 누르면 음악검색하기 하단에 리스트로 나타나게 해 보자.

위에서 만든 리스트 템플릿의 GEE와 소녀시대 부분을 받아올 데이터를 담을 변수로 처리하자.

 

GET 형식으로 데이터를 콘솔로 받아왔던 ajax 함수가 포함된 addMusicList함수 아래에 getMusicHtml 함수를 짜보자.

function getMusicHtml(title, artist) {
        let musicHtml = `<ul class="musicList">
            <li class="title">${title}</li>
            <li class="artist">${artist}</li>
        </ul>`
        $('.musicListList').append(musicHtml)
    }

html코드 내에 변수를 포함하고 싶으면 1 옆의 `(백틱) 기호로 감싸고 변수 자리는 ${}를 통해 포함한다. 그리고 append함수를 통해(내장함수임) musicHtml을 감싸고있는 .musicListList 내에 append 시켜준다.

 

그리고 getMusicHtml 함수는 아래에서 호출한다.

function addMusicList() {
        let musicKeyWord = $('#songinfo').val()
        $.ajax({
            type: 'GET',
            url: 'http://ws.audioscrobbler.com/2.0/?method=track.search&track=' + musicKeyWord + '&api_key=개인API키&format=json',
            success: function (response) {
                let musicList = response["results"]["trackmatches"]["track"];
                for (let i = 0; i < musicList.length; i++) {
                    let albumTitle = musicList[i]["name"]
                    let albumArtist = musicList[i]["artist"]
                    getMusicHtml(albumTitle, albumArtist)
                }
            }
        })
    }

alert는 그냥 뺐다.

그리고 검색을 해 보자.

잘 나오긴 하는데 문제가 생겼다.

샘플로 html내에 만들어 둔 처음 template이 지워지지 않았다.

musicList의 샘플 데이터를 지워주자.

<div class="musicListList">
    <!-- <ul class="musicList">
        <li class="title">GEE</li>
        <li class="artist">소녀시대</li>
    </ul> -->
</div>

그리고 다시 검색해보자.

샘플로 넣었던 대문자 GEE가 없어지고 새로운 데이터들로 이루어진 모습을 볼 수 있다.

 

음.. 뭔가 부족하다.

포털 사이트들을 보면 검색을 누르지 않고도 키보드를 누를 때 마다 정보가 리셋돼 검색창 아래에 나타나곤 한다.

그것을 한번 구현해보자.

---

검색창에 이벤트가 나타날 때 마다 함수를 실행시켜야 한다. 검색창에 키보드로 입력을 받을 때 마다의 이벤트는 onkeyup을 이용하면 된다.

참고로, input 검색창을 클릭했을 때 자동으로 전에 검색했던 단어들이 뜨는 경우가 있다. 검색창 자동완성을 해제하기 위해서는 autocomplete="off" 설정한다.

 

onclick으로 함수를 연결했던 부분을 아래와 같이 수정한다.

<input type="text" id="songinfo" class="whatToSearch" placeholder="검색" autocomplete="off" onkeyup="addMusicList()">

다 마치고 검색창에 ㄱ을 눌렀는데 ㄱ에 해당하는 리스트가 뜬다. 그런데 다음 글자에 대한 리스트는 나오지 않는다.

잘 살펴보면 오른쪽 스크롤바 길이가 짧아지면서 검색되는 검색어들이 아래로 축척되는걸 확인할 수 있다.

 

다음 해야 할 일은 저 목록들을 키를 누를 때 마다 전의 데이터를 리셋시키는 것이다.

 

우선 처음 페이지를 열었을 때 남아있을지 모르는 목록들을 리셋해주자.

<script>
$(document).ready(
            $('.musicList').empty()
        )
  ...
 </script>

그리고 onkeyup과 연결된 addMusicList 함수도 시작 시 리셋하자.

계속 해당 함수를 호출하는 방식이기 때문에 새롭게 호출할 때 마다 전의 데이터들을 리셋하는 방법이다.

function addMusicList() {
        let musicKeyWord = $('#songinfo').val()
        $('.musicList').empty()	//새로 추가해야 할 줄
        $.ajax({
        ...
        })
    }

이제 확인해 보면 우리가 원하는 대로 나온다.

---

예쁘게 꾸미는 css는 개인마다 취향이 있을터이니 적용시키지 않았다.

이후에 더 수정할 것 들이 많을테니 정리해서 돌아오도록 하겠습니다!