서치 이펙트01

검색 효과

이번시간에는 키워드검색을 할 수 있는 사이트를 만들어 보겠습니다.

---

원본 소스 보기 원본 사이트

---

▶ 이 사이트에 사용된 indexOf()의 특징에 대해 간단하게만 알아보고 가겠습니다. indexOf()는 문자열에서 특정 문자의 위치를 찾고 인덱스값을 반환하는 메서드입니다.

const str ="javascript";
const currentStr = str.indexOf("javascript"); //0

위의 예시처럼 'javascript'라는 문자열을 찾는 경우 변수에서 시작점이 0번째부터 시작되므로 출력값은 0이 반환되는 것입니다.

JS 소스 분석하기

const searchBox = document.querySelector(".search__box input");   //input 박스(검색영역)
const searchList = document.querySelectorAll(".search__list ul li");    //목록 리스트

searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;         //사용자 입력 키워드
    
    searchList.forEach(el => {
        const cssName = el.dataset.name;
        
        if(cssName.indexOf(searchWord)){
            el.classList.add("hide");
        } else{
            el.classList.remove("hide");       //indexOf()값이 0이되는 값만 hide를 지워줌. (="abbr".indexOf("abbr");)
        }
    });
});

html에서 각각의 li태그에 'data-name="all"'같은 데이터네임을 지어줬는데요. 이걸 활용해볼거에요.
활용에 앞서서 if문의 조건이 0일 경우는 false값이 출력된다는 것 한번 다들 기억하고 계시죠?
위의 if문이 "all"인 경우를 예로 들자면,

"all".indexOf("all")은 0으로 반환이 되므로 else의 실행문이 실행되게 됩니다. 고로, 정확히 일치해서 0이 반환된 all을 제외한 나머지 요소들은 class="hide"가 붙고 제외된 all은 hide가 사라지므로 저희의 눈에는 검색한 "all"만 보이게 되는것입니다.
indexOf와 if문만 이해하니깐 생각보다 쉽죠 ?