티스토리 뷰

const searchBox = document.querySelector("#search-box");    //search-box 변수에 저장
const cssList = document.querySelectorAll(".list ul li");   //다수의 li를 변수에 저장
const cssCount = document.querySelector(".count em");

cssList.forEach((element, index) => {
    element.classList.add("show");
    cssCount.innerHTML = index + 1;
    });

searchBox.addEventListener("keyup", () => {     //input를 클릭했을 때 이벤트 설정
    const searchWord = searchBox.value;    //사용자가 입력한 데이터 저장소 변수에 저장

    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' 카테고리의 다른 글

Search Effect06 - sort( ), reverse( )  (0) 2022.02.15
Search Effect05 - filter()  (0) 2022.02.09
Search Effect04 - find()  (0) 2022.02.08
Search Effect03 - charAt()  (0) 2022.02.08
searchEffect02 - includes()  (11) 2022.02.07
댓글
© 2018 webstoryboy