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를 삭제
}
})
})