[영화검색 사이트] 검색 기능 구현하기

영화를 검색하는 기능이다.

let searchData = [];


fetch('https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1', options)
    .then(response => response.json())
    .then(response =>
        response.results.forEach(item => {
           searchData.push(item)
        })
    )
    .catch(err => console.error(err));

1. searchData라는 빈배열을 선언한다. 

2. fatch로 불러온 데이터를 searchData에 push해 준다. 

 

let titleSearch = () => {
    let SearchInput = idSearch.value;
    console.log(SearchInput)
    // 내가 검색한 제목과 리스트의 제목이 일치하는지 확인
    let searchFil = searchData.filter((item) => {
        for (let i = 0; i < searchData.length; i++) {
            for (let k = 0; k < searchData[i].title.length; k++) {
                if (item.title.startsWith(SearchInput, k)) {
                    return item.title
                }
            }
        }

    })

    // console.log(searchFil[0].title.indexOf("S", 4))
    if (searchFil.length === 0 || SearchInput === "") {
        alert("영화제목이 올바르지 않습니다. ");
        location.reload();
        return;
    } else {
        searchResult = "";
        for (let i = 0; i < searchFil.length; i++) {
            let titleAppend =
                `<li class="cell" onclick="printId(\'' + ${searchFil[i].id} + '\')">
                    <div class="imgBox">
                    <img src="https://image.tmdb.org/t/p/w500${searchFil[i].poster_path}" alt="">
                    </div>
                    <div class="movicInforBox">
                        <span class="movieTitle">${searchFil[i].title}</span>
                        <span class="movieoverview">${searchFil[i].overview}</span>
                        <span class="movievote_average">평점 : ${searchFil[i].vote_average}</span>
                    </div>
                </li>`;

            searchResult += titleAppend;
            movieList.innerHTML = searchResult;
        }
    }
}

1. input으로 받아온 value를 변수에 담아 준다

2. filter함수를 통해서 input에 입력한 값과 searchData에 담긴 데이터를 비교 해서 

input에 입력한 값과 일치하는 데이터들을 불러온다.

3. 제목의 일부만 입력해도 검색이 되야 하기에 startWidth라는 메서드를 사용한다.

startWidth는 문자열에 어떤 문자가 있는지 검색하는 메서드이다.

searchData.title에 input에 입력한 값이 있는지 검증하고 있다면 true, 없으면 false를 반환한다. 

4. 그리고 검색하려는 문자열이 시작하는 번호를 지정해야 한다. (지정하지 않으면 0번째의 문자를 검색한다.)

5. for문을 통해 문자열이 시작하는 번호를 하나하나 출력해서 ture라면 데이터를 출력하고 false라면 출력하지 않는다.

6. searchData는 배열이기 때문에 searchData.length를 배열의 길이를 나타낸다. searchData의 길이보다 title이 더 길다면 출력이 안되기 때문에 for문을 중첩해서 배열 속에 잇는 title의 길이만큼 for문을 돌려서 출력한다.