티스토리 뷰
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"); // 데이터가 있으면 클래스 hide를 추가
} else {
el.classList.remove("hide"); // 데이터가 있으면 클래스 hide를 삭제
}
})
})
'Script Sample > Search Effect' 카테고리의 다른 글
Search Effect 06 - sort() / reverse () (0) | 2022.02.11 |
---|---|
Search Effect 05 - filter() (0) | 2022.02.09 |
Search Effect 04 - find() (0) | 2022.02.08 |
Search Effect03 - charAt() (0) | 2022.02.08 |
Search Effect02 - includes() (11) | 2022.02.07 |
댓글
© 2018 webstoryboy