티스토리 뷰


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

indexOf()참고

'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