#TIL 8일차(영화 검색 기능)

구현 순서

먼저 나는 header에 검색 폼을 넣어놨기 때문에 header.js에 검색 이벤트 리스너를 넣어놨다.

// 검색 이벤트 리스너 추가
<script>
document.addEventListener('DOMContentLoaded', function () {
    const searchForm = 	document.querySelector('.searchForm');
    searchForm.addEventListener('submit', handleSearch);
    });
    </script>

// 검색 이벤트 핸들러 함수
<script>
event.preventDefault(); // 제출 이벤트의 기본 동작을 중지
    const searchInput = document.getElementById('search');
    const searchTerm = searchInput.value.toLowerCase().trim();

    console.log("Search Term:", searchTerm);

    if (searchTerm === '') {
        alert('검색어를 입력하세요!');
        return;
</script>

그 후 검색 결과는 검색 결과 페이지가 따로 있었기 때문에 쿼리스트링을 사용하여 검색 페이지로 넘어가는 작업을 거쳤다.

<script>
	window.location.href = `search.html?query=${encodeURIComponent(searchTerm)}`;
</script>

검색어 정보를 받아온 url을 가져와 데이터에 검색어가 있는지 filter를 사용해 확인하는 작업을 거쳤다.

<script>
	document.addEventListener('DOMContentLoaded', function () {
            // URL에서 검색어 추출
            const urlParams = new URLSearchParams(window.location.search);
            const searchTerm = urlParams.get('query');

            // 검색어가 있을 경우 top rated 영화 목록에서 검색 결과 가져오기
            if (searchTerm) {
                const apiKey = 'your-apikey';
                const topRatedUrl = `https://api.themoviedb.org/3/movie/top_rated?api_key=${apiKey}&language=en-US&page=1`;

                fetch(topRatedUrl)
                    .then(response => response.json())
                    .then(data => {
                        // 가져온 top rated 영화 목록에서 검색어와 일치하는 영화 필터링
                        const matchedMovies = data.results.filter(movie => {
                            // 간단한 예시로 영화 제목으로 검색
                            return movie.title.toLowerCase().includes(searchTerm);
                        });

                        // 검색 결과를 화면에 표시
                        displaySearchResults(matchedMovies);
                    })
                    .catch(error => {
                        console.error('API 호출 중 오류 발생:', error);
                    });
            }
        });
</script>

검색을 할 때마다 페이지는 새로 갱신되어야되기때문에 innerHTML을 사용해 이전 검색 결과를 삭제하는 작업을 했고, 가져온 영화 정보는 innerHTML을 통해 기존 html에 채워넣었다.

<script>
	function displaySearchResults(movies) {
        const searchPage = document.querySelector('.search-page');
    
        if (!searchPage) {
            console.error('검색 페이지 요소를 찾을 수 없습니다.');
            return;
        }
    
        searchPage.innerHTML = ''; // 이전 검색 결과 삭제
    
        movies.forEach(movie => {
            const item = document.createElement('div');
            item.classList.add('item');
            item.dataset.id = movie.id;
    
            item.innerHTML = `
                <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" id="movies-img">
                <div class="item-body">
                    <div class="item-detail">
                        <h4>개봉일: </h4> 
                        <h4 id="movie-date">${movie.release_date}</h4>
                        <i class="fa fa-star" id="scores"></i>
                        <h5 id="movies-score">${movie.vote_average}</h5>
                    </div>
                    <h3 class="movies-title">${movie.title}</h3>
                    <h5 class="movies-content">${movie.overview}</h5>   
                </div>
            `;
            searchPage.appendChild(item);

            // alert창 띄우기(영화 id)
            item.addEventListener('click', function(event) {
                    const movieId = event.currentTarget.dataset.id;
                    alert(`선택된 영화 ID: ${movieId} 입니다!`);
                });
        });
    }
</script>