SearchEffect02 - includes()

 

        const searchBox = document.querySelector("#search-box");
        const cssList = document.querySelectorAll(".list ul li");
        const cssCount = document.querySelector(".count em");

        cssList.forEach((element, index) => { // 모든 cssList를 보임처리한다.
            element.classList.add("show");
            console.log(index);
            cssCount.innerHTML = index + 1; // 전체속성갯수를 카운트한다.
        });

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

            //console.log(searchWord) // 찾으려는 값 

            cssList.forEach(el => {
                const cssName = el.dataset.name; //CSS 속성 모든 값
                //console.log(cssName);

                if(cssName.includes(searchWord)){ // 찾으려는 글자를 현재 탐색하고 있는 li가 포함하고 있다면
                    el.classList.add("show"); //보여준다.
                } else {
                    el.classList.remove("show"); // 아니라면 숨긴다.
                }
            })
        })