[FE] 영화 검색 사이트(바닐라JS) - (2) 중단부_검색창

🖐️ 구현 목표 🖐️
- 영화 검색 텍스트, input, 부트스트랩 button 삽입
- 검색 시 조건에 맞는 영화만 출력하기 위해 비우기 기능 구현
- input 입력 후, button 클릭시 조건에 맞는 영화 검색 기능
- input 입력 후, Enter key 클릭 시에도 조건에 맞는 영화 검색 기능
- 입력이 없는 상태로 button 혹은 Enter key 를 눌렀을때 새로고침(처음 화면으로 돌아가기)
- 대소문자 구분 없이 조건에 맞는 영화 검색 기능

 

01 html

---

검색창을 만들어주기 위해 "영화 검색 : "문자열과 input 태그를 사용하여 사용자가 입력을 할 수 있도록 하고 button을 추가해준다. 그리고 이것들을 하나의 div로 묶었다. button은 bootstrap의 버튼을 이용하여 색상에 맞춰 만들었다. 

<div class="search">
        영화 검색 : <input id="user_input" onkeyup="if( event.keyCode == 13 ){search();}">
        <button id="myBtn" type="button" onclick="search()" class="btn btn-outline-light">검색</button>
</div>

 

 

02 CSS

---

검색창을 하나로 묶은 search 클래스에 원하는 색상의 크기와 위치를 지정해주고 안에 있는 button의 margin값을 지정해주어 위치를 지정해주었다.

.search {
            background-color: #4a724a65;
            text-align: center;
            color: white;

            margin: 0px auto 40px auto;
            padding: 10px 10px 10px 10px;
}

.search > button {
            margin: 0px 0px 5px 5px;
}

 

 

03 Javascript

---

<div class="search">
        영화 검색 : <input id="user_input" onkeyup="if( event.keyCode == 13 ){search();}">
        <button id="myBtn" type="button" onclick="search()" class="btn btn-outline-light">검색</button>
</div>

 

 1) 검색 시 조건에 맞는 영화만 출력하기 위해 비우기 - javascript

검색창에 영화의 이름을 입력해서 영화를 검색할때 이미 나와있는 영화들은 보여주지 말고 딱 조건에 맞는 영화만을 출력하는 부분을 구현하기 위해 innerHTML=' '; 를 사용하여 card부분을 지정하여 초기화를 시켜주었다.

document.querySelector('#card').innerHTML='';

 

 

 2) 버튼 클릭시 영화 검색 함수 호출 - html

버튼을 클릭했을때 영화를 검색해주는 search()함수를 호출할 수 있도록 onclick을 적용했다.

<button id="myBtn" type="button" onclick="search()" class="btn btn-outline-light">검색</button>

 

 

 3) 엔터키 입력시 영화 검색 - html

Enter Key의 경우 입력받는 부분에서 이벤트가 발생해야하기 때문에 input 태그에 onkeyup을 통해 호출을 해주어야하는데 왜인지는 모르겠지만 함수를 호출해오는 부분이 제대로 작동하지 않아서 강제로 이벤트발생을 시키도록 바로 넣어주었다. 그리고 onkeypress와 onkeyup, onkeydown 등 여러가지이지만 onkeyup이 버튼을 클릭하고 손을 뗄때 발동이 된다고 해서 선택하게 되었다. 

<input id="user_input" onkeyup="if( event.keyCode == 13 ){search();}">

 

 

 4) 입력이 없는 상태로 버튼 혹은 엔터키를 눌렀을 때 새로고침 (처음 화면으로 돌아가는 기능)

tf 값에 0을 초기화 해둔 상태로 입력한 값이 영화 목록에 있으면 tf값을 1로 변하게 코드를 설정해둔 상태에서 만약 입력이 없는 상태로 이벤트를 발생시켰을때는 아래 코드를 실행시키도록 하여 다시 처음의 페이지를 생성하도록 구현을 해주었다.

if(tf===0) {
                // 검색 버튼 클릭시 다시 원상태 복구, 검색한 입력값이 없을 경우
                // 영화 API 값을 가지고 와서 카드를 전부 추가
                for(let i = 0; i < 20; i++) {
                    fetch(url)
                    .then((res) => res.json())
                    .then((data) => {
                        movies.push(data["results"][i]["original_title"]);

                        let original_title = data["results"][i]["original_title"];
                        let overview = data["results"][i]["overview"];
                        let poster_path = data["results"][i]["poster_path"];
                        let img_url = "https://image.tmdb.org/t/p/original"+poster_path;
                        let vote_average = data["results"][i]["vote_average"];

                        let id = data["results"][i]["id"];
        
                        let temp_html = `
                            <div class="col" onclick="alert('영화 ID : '+${id})">
                                <div class="card h-100">
                                <img src="${img_url}" class="card-img-top" alt="..."/>
                                <div class="card-body">
                                    <h5 class="card-title" id="count">${original_title}</h5>
                                    <p class="card-text">${overview}</p>
                                </div>
                                <div class="card-footer">
                                    <small class="text-body-secondary">평점 : ${vote_average}</small>
                                </div>
                                </div>
                            </div>`;

                        document.querySelector('#card').insertAdjacentHTML('beforeend', temp_html);
                    });
                }
            }

 

 

 5) 대소문자 구분 없이 알맞는 결과 출력

사용자로부터 입력받은 값을 대문자로 바꾸고 영화 제목만 배열로 만들어둔 movies도 하나하나 반복문을 돌려서 대문자로 만들어서 저장한 뒤 조건문을 사용하여 입력한 값이 영화 목록에 있는지 확인하고 있다면 카드를 출력해주는 코드를 구현하였다.

search = search.toUpperCase(); //입력받은 값
 // search.toUpperCase() === movies[i].toUpperCase()
 // movies[i].indexOf(search) !== -1

// 영화 검색 기능 구현
for(let i = 0; i < 20; i++) {
      movies[i] = movies[i].toUpperCase()
      if(movies[i].indexOf(search) !== -1) {
          ............................
          ............................
          ............................
      }
}