searchEffect02 - includes()

const searchBox = document.querySelector("#search-box");    //변수 searchBox에 #search-box(input태그)담는다.
const cssList = document.querySelectorAll(".list ul li");    //변수 cssList에 li태그(css속성저장된 li태그들) 담는다.
const cssCount = document.querySelector(".count em")        //변수 csscount에 em태그(전체속성갯수나타내는태그) 담는다.

cssList.forEach((e, index) => {    //문서 내 li태그들을 하나씩 순회한다.
    e.classList.add("show");        //모든 li태그에 class = "show"를 추가한다.
    cssCount.innerHTML = index + 1;  //forEach문이 한번 돌 때마다 cssCount(em)태그에 'index번호 + 1'로 수정한다... 최종적으로 전체 li의 갯수가 em태그에 추가된다.
})

searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value; //사용자가 input태그에 입력한 값을 searchWord 변수에 저장한다.
            
    cssList.forEach(el => {
        const cssName = el.dataset.name;    //cssList에서 data-name의 값(css속성명)을 cssName에 저장한다.

        if(cssName.includes(searchWord)){    //searchWord(사용자가 input태그에 입력한 값)이 cssName(css속성명)에 포함 여부를 판단한다.
            el.classList.add("show");    //포함되어있다면 el(li 태그)에 class="show"를 추가한다.
        } else {
            el.classList.remove("show"); //포함되어있지 않으면 el(li 태그)에 class="show"를 삭제한다.
        }
    });
});

includes() 검색효과 사이트

 

includes() 참고 사이트