Script Sample/Search Effect

searchEffect01 - indexOf()

GYChoi 2022. 2. 7. 16:25

https://garenchoi.github.io/webs_class/javascript/effect/searchEffect01.html


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한테 적용
		const cssName = el.dataset.name;		// CSS 속성 값을 변수에 저장

		if(cssName.indexOf(searchWord)){		// 사용자가 입력한 값에 데이터가 있는지 확인
        	el.classList.add("hide");			// 데이터가 있으면 클래스 hide를 추가
        } else {
        	el.classList.remove("hide");			// 데이터가 없으면 클래스 hide를 삭제
        }
    })
})