<input
type="text"
id="search-input"
placeholder="검색할 영화 제목을 입력해주세요."
autofocus
/>
autofocus를 추가하면 된다.
js부분에서 focus()를 사용해보려고 했지만, 스크립트 실행 순서 때문인지 작동이 안되었다.
getAttribute("속성")
예제: https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/innerText
소문자나 대문자로 통일해서 비교한다.
toUpperCase() 나 toLowercase() 를 사용한다.
처음에 || 연산자를 사용해서 둘 중 하나가 들어오면 수행하게 만들까 했는데, form태그 내에서는 submit을 실행하면 둘 다 입력이 된다.
주의할 점은, preventDefault()를 콜백해서 기본동작인 리로드를 방지해주어야 한다.
생각해본 아이디어
1. forEach문으로 모든 타이틀을 비교해본다.
2. filter나 find로 찾아본다.
const findTitle = function(movies) {
// input값 가져와서 title과 비교하기
let search = document.getElementById("search-input").value;
console.log(typeof search, search);
// 버튼 클릭이나 엔터 키 입력되었을 때 실행
const filtermovie = movies.filter(movie => movie.original_title.toUpperCase() === search.toUpperCase())
console.log(filtermovie);
}
=> filtermovie에 아무것도 안담긴다.
로그를 찍어서 search가 string이면서 값이 잘 담기는 것을 확인했고, movie.original_title이 잘 찍히는 것도 확인했는데 filtermovie에 아무것도 안담겼다.
movie.original_title.toLowerCase().includes(search)
=> 요소를 참고하는 includes()를 사용해 봤는데도 filtermovie에는 아무것도 안담겼다.
find로 변경해봐도 undefined가 나왔다.
검색 했을 때 오타가 있던 것이였다. 역시 오타가 제일 문제..
변수.filter(매개변수 => 리턴할 값)
변수.filter(매개변수 => {return 리턴할 값})
json() 데이터를 불러왔을 경우에는 string인지, 어떤 타입인지 모르기 때문에 자동완성이 안된다.