서치 이펙트02

검색 효과

저번시간에 이어서 또 검색 사이트를 만들어보겠습니다. 저번 시간에는 indexOF()를 사용했었죠? 이번엔 includes()를 이용해서 만들어보겠습니다.

---

원본 소스 보기 원본 사이트

---

▶ 이 사이트에 사용된 includes()의 특징에 대해 간단하게만 알아보고 가겠습니다. includes()는 문자열 포함 여부를 검색해서 불린(true/false)을 반환합니다.

const str1 ="javascript reference";
const currentStr1 = str1.includes("javascript"); //true
const currentStr2 = str1.includes("j"); //true
const currentStr3 = str1.includes("b"); //false

크게 어려운 내용없이 검색할 문자가 포함이 되어있다면 true가 반환됩니다.

JS 소스 분석하기

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

// 전채 갯수 구하기
searchInfo.textContent = searchList.length

// 
searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;     //사용자가 입력한 키워드

    searchList.forEach(el => {
        const cssName = el.dataset.name;        //CSS 속성 모든 값
        
        if(cssName.includes(searchWord)){
            el.classList.remove("hide");
        } else{
            el.classList.add("hide");
        }
    });
});

html에서 각각의 li태그에 'data-name="all"'같은 데이터네임을 지어줬는데요. 이걸 활용해볼거에요.
위의 if문이 "all"인 경우를 예로 들자면,

"all".includes("all")은 true로 반환 되므로 true에 해당하는 요소에 class hide를 지워줍니다. 앞서 1번유형에서 봤듯이 hide가 지워지므로 화면에 출력이 되겠죠? 반대로 검색 되지 않은 나머지요소들(else에 해당)은 hide가 붙으므로 당연히 화면에 보이지 않게 됩니다.