티스토리 뷰

indexOf

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

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

searchEffect06 - sort()  (0) 2022.02.15
searchEffect05 - filter()  (0) 2022.02.10
searchEffect04 - find()  (0) 2022.02.08
searchEffect03 - charAt()  (0) 2022.02.08
searchEffect02- includes( )  (0) 2022.02.07
댓글
© 2018 webstoryboy