search effect01 - 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; 		//사용자가 입력한 데이터 저장소 변수에 저장
    //console.log(searchWord);

    cssList.forEach(el => {				//다수의 li한테 적용
        console.log(el.dataset.name)

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

indexOf()참고