searchEffect01 - indexOf()

const searchBox = document.querySelector("#search-box"); //search-box 변수에 저장
const cssList = document.querySelectorAll(".list ul li"); //다수의 li를 변수에 저장

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

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

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