[영화 검색 사이트] - 영화 검색 키워드 필터링 구현하기

문제 상황

내가 구현하려던 기능은

'사용자가 검색창에 키워드를 입력하고 엔터를 쳤을 때, 키워드를 가지고 있는 영화 카드를 띄우는 것'이었다

 

이 기능을 구현하는데 내가 구현하면서 어려움을 겪었던 부분은 다음과 같았다

 

📌 HTML 요소를 클릭했을 때 Javascript가 인지하는 기능

📌 사용자가 검색창에 입력한 값을 가져오는 기능

📌 사용자가 입력한 키워드와 영화 제목을 비교하여 일치하는 것만 도출하는 기능

📌 일치한 영화 카드만 보여주는 기능

으로 크게 4가지로 나눠볼 수 있다

 

밑에서 차례대로 해결하는 과정을 설명하겠다

 

 

해결 과정

📌 HTML 요소를 클릭했을 때 Javascript가 인지하는 기능

addEventListener 이용하기

addEventListener을 이용하면 HTML 요소에서 event가 발생했을 때, 함수를 실행시킬 수 있다

addEventListener(event, function)

 

 

예시를 한 번 살펴보자

$searchInput.addEventListener("keydown", bringInput);

$searchInput은 사용자가 키워드를 입력하는 검색창을 querySelect로 지정하고 있음을 뜻한다

사용자가 키보드 키를 눌렀을 때(= "keydown"), bringInput 함수를 실행하게 된다

 

const bringInput = function (event) {
  if (event.key === "Enter") {
    const userInput = $searchInput.value; // 사용자가 입력한 값
    $searchInput.value = ""; // 사용자가 입력한 값 초기화하기
    filterInput(userInput);
  }

event에는 정말 다양한 종류가 있기 때문에 따로 관련 내용을 정리하였다

영화 검색 사이트 만들기 - API로 영화 카드 템플릿을 어떻게 제작할까?

 

📌 사용자가 검색창에 입력한 값을 가져오는 기능

.value 이용하기

HTML 태그를 querySelect로 지정하고 있는 변수에 .value를 붙여주면 input 값을 알 수 있다

HMLT 태그.value

 

 

예시와 함께 살펴보자

const bringInput = function (event) {
  if (event.key === "Enter") {
    const userInput = $searchInput.value; // 사용자가 입력한 값
    $searchInput.value = ""; // 사용자가 입력한 값 초기화하기
    filterInput(userInput);
  }

사용자가 입력한 값을 가져오는 함수를 하나 생성했다

여기서 발생한 event는 "keydown"이다

사용자가 누른 키가 "Enter"일 경우, value를 통해 사용자가 입력한 값을 받아왔다

사용자가 입력한 값을 다음 함수에 넘겨주면 끝이다!

 

추가적으로 사용자가 입력한 값을 지워주기 위해 빈문자열을 할당하였다

 

📌 사용자가 입력한 키워드를 필터링 하는 기능

filter 메서드, includes 메서드 이용하기

filter 메서드를 이용해서 사용자가 입력한 키워드를 포함하고 있는 영화 제목들을 담고 있는 새로운 배열을 만들 수 있다

includes 메서드를 이용해서 사용자가 입력한 키워드가 영화 제목에 포함되어 있는지 확인할 수 있다

// filter 메서드
// return 값이 true인 배열 요소들만 모아서 새로운 배열을 만듬
Array.filter(function () {})

// includes 메서드
searchString이 포함되어있을 경우 true를 반환함
includes(searchString)

 

 

예시를 보면 조금 더 이해하기 쉬울 것이다

const filterInput = function (userInput) {
  const searchedMovieList = movieList.filter((movie) => {
    return movie.title.toLowerCase().includes(userInput.toLowerCase());
  });

  if (searchedMovieList.length === 0) {
    alert("입력하신 키워드와 일치하는 영화가 없습니다");
  }
  makeSearchedMovie(searchedMovieList);
};

사용자가 검색한 키워드가 담긴 영화 리스트를 반환하는 함수를 하나 생성했다

2번째 줄을 말로 풀어서 설명하면,

1. 영화 제목에 사용자가 입력한 값이 포함되어 있을 경우 true를 반환한다 (includes)

2. true가 반환되는 영화들을 모아진 배열을 searchedMovieList에 담는다 (filter)

searchedMovieList를 다음 함수에 넘겨주면 끝이다!

 

추가적으로 일치하는 영화가 없을 때 경고창을 띄우는 조건문을 추가하였다

추가적으로 사용자가 입력하는 값과 영화 제목을 모두 소문자로 바꿔주는 메서드를 추가하였다

 

📌 일치한 영화 카드만 보여주는 기능

여기서부터는 이전에 만든 카드 템플릿을 이용하면 된다

과거에 작성한 글을 첨부하겠다

영화 검색 사이트 만들기 (3) - API로 영화 카드 템플릿을 어떻게 제작할까?

 

주의할 점이 있다면

기존에 있던 카드를 없애준 뒤에 새로운 카드를 생성해야 한다는 점이다

$movieList.innerHTML = "";

innerHTML을 이용하여 빈문자열을 할당해주면 div 태그 "movieList" 내부 요소들이 모두 사라지게 된다

 

 

결과

위의 과정을 차근차근 해결하다보면

다음과 같은 검색 기능을 구현할 수 있다

이제 모달창 구현으로 넘어가보자..~