Search Effect02 - includes()

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

cssList.forEach((element, index) => {			// cssList의 각각 요소값에 적용
        element.classList.add("show");				// 각각의 요소의 클래스 show 추가
        cssCount.innerHTML = index + 1;			// cssCount 에 인덱스값 + 1 입력
    });

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

    cssList.forEach(el => {					// cssList의 각각 요소값에 적용
        const cssName = el.dataset.name; 		// 각 요소의 data-name을 cssName에 저장

        if (cssName.includes(searchWord)){	// 입력한 값을 cssName이 포함하고 있을 때
            el.classList.add("show");			// 클래스 show 추가
        } else {
            el.classList.remove("show");			// 그렇지 않으면, 클래스 show 삭제
        }
    })
})

includes()참고

전체 사이트 보기