SearchEffect01 - indexOf()

const searchBox = document.querySelector("#search-box");	//search-box 저장
const cssList = document.querySelectorAll(".list ul li");	//모든 li선택

        
searchBox.addEventListener("keyup", () => {		//키를 눌렀을 때 실행
     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클래스 삭제
        }
 	})
})

320x100

저작자표시

'Script Sample > SearchEffect' 카테고리의 다른 글

SearchEffect06 - sort( ), reverse()  (0)	2022.02.21
SearchEffect05 - filter()  (0)	2022.02.21
SearchEffect04 - find()  (0)	2022.02.21
SearchEffect03 - charAt()  (0)	2022.02.21
SearchEffect02 - includes()  (1)	2022.02.07

UP NEXT : Script Sample/SearchEffect

• SearchEffect05 - filter()
• SearchEffect04 - find()
• SearchEffect03 - charAt()
• SearchEffect02 - includes()

댓글