티스토리 뷰


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참고

'ScriptSample > Search Effect' 카테고리의 다른 글

Search Effect05 - filter()  (0) 2022.02.09
Search Effect04 - find()  (0) 2022.02.08
Search Effect03 - charAt()  (0) 2022.02.08
Search Effect02 - includes()  (4) 2022.02.07
댓글
© 2018 webstoryboy