2. 서치 이펙트 -1

서치 이펙트 만들기1

indexOf()를 이용하여 서치 이펙트를 만들었습니다. 열심히 공부하세요!

---

서치 이펙트1

원본 소스 보기

자바스크립트

//선택자
const searchBox = document.querySelector(".search__box input");            //검색 영역
const searchList = document.querySelectorAll(".search__list ul li"); //목록 리스트

const searchInfo = document.querySelector(".search__info .num")


//전체 갯수 구하기
searchInfo.textContent = searchList.length;

//검색 영역
searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;     //사용자가 입력한 키워드
    searchList.forEach(el => {
        const cssName = el.dataset.name;
        if (cssName.indexOf(searchWord)) {
            el.classList.add("hide");
        } else {
            el.classList.remove("hide");    //indexOf값이 0이 되는 값만 hide를 지워줍니다.
        }
    });
});

---