searchEffect02 - includes()

const searchBox = document.querySelector("#search-box");		//search-box 변수에 저장한다.
const cssList = document.querySelectorAll(".list ul li");		//다수의 li를 변수에 저장한다.
const cssCount = document.querySelector(".count em")
       
cssList.forEach((e, index) => {		//forEach를 이용해 모든 li의 index 를 불러온다.
		e.classList.add("show");		//불러온 index에 CSS.show 클래스를 부여한다.
        console.log(index);
        cssCount.innerHTML = index + 1;		//index는 0번째 부터 시작하므로 1을 더해서 입력한다.
})
        searchBox.addEventListener("keyup", () => {
            const searchWord = searchBox.value;		//사용자가 입력한 값
           
            cssList.forEach(el => {
                const cssName = el.dataset.name;	 //CSS 속성 모든 값 을 변수로 지정한다.
          
                if(cssName.includes(searchWord)){		//사용자가 입력한 값에 데이터가 있는지 확인한다.
                    el.classList.add("show");		//조건이 true면 show클래스를 추가한다.
                } else {
                    el.classList.remove("show");		//조건이 false 이면 show 클래스를 제거한다.
                }
            });
        });

includes()

 

Search Effect