searchEffect02 - includes()

const searchBox = document.querySelector("#search-box"); //search-box 변수에 저장
 const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장
 const cssCount = document.querySelector(".count em"); //.count em 변수에 저장
    
 cssList.forEach((element, index) => {
         element.classList.add("show");
         cssCount.innerHTML = index + 1;
     })

  searchBox.addEventListener("keyup", () => { //input을 클릭했을 때 이벤트 설정
     const searchWord = searchBox.value;      //사용자가 입력한 데이터 저장소 변수에 저장

     // console.log(searchWord)

     cssList.forEach(el => {                 //다수의 li에 적용
         const cssName = el.dataset.name; 	// CSS 속성 값을 변수에 저장
          
          // console.log(cssName)	
          
         if(cssName.includes(searchWord)){ //사용자가 입력한 값이 데이터가 있는지 확인
             el.classList.add("show");     //데이터가 있으면 클래스 show를 추가
         }else {
             el.classList.remove("show");  //데이터가 없으면 클래스 show를 삭제
         }
     })
 })

사이트 바로가기 : https://dnwls7738.github.io/webs_class/javascript/effect/searchEffect.html