[TIL] 대소문자 구분없이 검색 기능 구현하기

영화 리스트 중에서 제목을 검색하면

해당 영화만 페이지에 나올 수 있도록 구현해봤다.

 

 

그런데 영화 제목에 대문자도 들어있다보니

똑같이 대소문자를 구별하여 검색해야만 했고

이는 사용자들에게 매우 불편함을 줄 것 같았다.

 

 

그래서 대소문자를 구별하지 않아도 검색이 가능한 코드를 짜봤다.

 //html에 들어갈 영화 카드 + 검색 값 세팅

 

    function movieList(val = "") {

      movieCard.innerHTML = movieData.map((data) => {

        if(data.title.toLowerCase().includes(val.toLowerCase())) {

          return`

 

        //생략//

         

          `;

        }

      })

      .join("") //html 배열의 요소를 연결

    }

    movieList(); //함수 호출

 

if문에서 data.title 바로 뒤에 .toLowerCase()를 넣어서

데이터 배열에 있는 영화 제목들을 미리 소문자로 바꿔준다.

그리고 includes()안에 다시 한번 .toLowerCase()를 넣어줌으로

사용자가 대문자로 검색하더라도 소문자로 변환하여 적용해준다.

 

 

이렇게 하면 대문자 소문자 구별없이 검색 기능 구현이 가능하다!