[JS][프로젝트] 🎬영화 검색 UI(2) - 검색 기능 구현하기

🔗 구현 페이지 링크

https://park-yuyeong.github.io/movie_search_site/main.html

 

💫 카드 리스트업 코드 수정

let temp_html = `
<div class="card"token interpolation">${element['id']}')">
	<img src="https://image.tmdb.org/t/p/w500${element['poster_path']}" alt="이미지 오류">
    <h3>${element['title']}</h3>
    <p>${element['overview']}</p>
    <p>Rating: ${element['vote_average']}</p>
</div>`;

card_section.innerHTML += temp_html;

  어제는 appendChild()통해 card_section에 카드를 추가해서 추가를 위한 코드가 좀 조잡한 느낌으로 짜였었는데, 문자열 덧셈을 통해 카드 리스트를 추가하도록 코드를 바꾸니 라인도 많이 줄고 코드를 파악하기에도 좋아졌다.👍

 

💫 검색 기능 구현

const find_movie = () => {
  const search_input = document.getElementById('search_input').value.toLowerCase();

  Array.from(card).forEach(item => { // 카드는 유사배열객체
    let find_title = item.getElementsByTagName('h3')[0].innerText.toLowerCase();
    if (find_title.indexOf(search_input) === -1) item.style = 'display: none';
    else item.style = 'display: inline';
  });
};

  검색 기능 구현을 위해 find_movie()라는 함수를 만들어 주었다.
  string.indexOf()를 문자열에서 특정 문자열을 찾는 함수이다. 검색한 문자열이 나타나는 첫번째 위치를 반환한다. 찾는 문자열이 없는 경우 -1을 반환한다.

 

💫 그 외 구현한 기능

• 소문자, 대문자 구분 없이 검색 가능
• 검색 버튼 누를 때 뿐만 아니라, 엔터 키를 입력했을 때도 find_movie() 실행
• 웹사이트 랜딩 또는 새로고침 후 검색 입력란에 커서 자동 위치