진행사항
header 컴포넌트로 header의 검색 만들기
// header
export const createHeader = () => {
...중략
searchForm.addEventListener('submit', (e) => {
e.preventDefault();
handleSearch();
});
searchButton.addEventListener('click', handleSearch);
}엔터를 누르면 검색이 되는 기능을 만들어야 했기 때문에 submit이벤트로 검색 폼을 컨트롤 하는 이벤트를 만들었는데, 역시 searchButton을 누를때도 필요했기 때문에 따로 이벤트를 분리해서 주었다. 뭔가 이상하긴 하다.
search form 기능 만들기
// search
const handleSearch = () => {
const list = document.querySelectorAll('.movie-item');
// Assignment(할당) to constant variable. let으로 값 재할당하기
let search = document.querySelector('.search-input').value;
if (search !== '') {
[...list].forEach((movie) => {
const title = movie.querySelector('h3').textContent.toLowerCase();
if (title.includes(search)) {
movie.style.display = 'block';
} else {
movie.style.display = 'none';
}
});
} else {
alert('검색어를 입력해 주세요.');
search = '';
}
};페이지의 li를 모두 가져온 후, search로 검색한 모든 값들을 가지고와 주었는데 이때 Assignment(할당) to constant variable. const를 사용하여 기능이 안 됬었다. 이런 에러는 let으로 값을 재 할당 해주면 해결이 된다.
search 검색된 값이 없을 때는 리턴값이 필요하지 않은 반복메서드를 사용하여 리스트의 값을 뽑아내 주었는데, 이때 배열의 요소를 개별 요소로 확장하여 복사하기 위해 Spread Operator를 통해 리스트 배열을 하나씩 반환해 주었다. 사실 undefined 가 계속 나와 써보다 알게 되었다.
textContent.toLowerCase 를 통한 대소문자 무시하는 검색처리.
하지만 1페이지 내에서 검색이라는 어마무시한 이슈가 있다..
