티스토리 뷰

Script Sample/Search Effect

includes

남하준 2022. 2. 7. 19:17

        const searchBox = document.querySelector("#search-box");    //search-box 변수에 저장
        const cssList = document.querySelectorAll(".list ul li");   //다수의 li를 변수에 저장
        const cssCount = document.querySelector(".count em");   //전체 li갯수를 표시
        
        cssList.forEach((element, index) => {
            element.classList.add("show");
            cssCount.innerHTML = index + 1;
            });
        
        searchBox.addEventListener("keyup", () => {     //input을 클릭했을 때 이벤트 설정
            const searchWord = searchBox.value;    //사용자가 입력한 데이터 저장소 변수에 저장
        
            // console.log(searchWord)
            
        
            cssList.forEach(el => {                 //다수의 li한테 적용
                const cssName = el.dataset.name;    //CSS 속성 값(속성 모든 값)을 변수에 저장
                // console.log(cssName)
        
                if(cssName.includes(searchWord)){   //사용자가 입력한 값의 데이터가 있는지 확인
                    el.classList.add("show");       //데이터가 있으면 클래스 add를 추가
                } else {
                    el.classList.remove("show");    //데이터가 없으면 클래스 add를 삭제
                }
            })
        })

includes()

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

indexOf  (0) 2022.02.07
댓글
© 2018 webstoryboy