2. 서치 이펙트 - 2

서치 이펙트 만들기2

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

---

서치 이펙트2

원본 소스 보기

자바스크립트

추후 추가 예정

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


//속성 갯수 설정하기

// for(let i=1; i<=searchList.length; i++){
//     const searchInfo = document.querySelector(".search__info .num")
//     searchInfo.innerHTML = i;
// };

searchInfo.textContent = searchList.length;


//
searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;     //사용자가 입력한 키워드
    searchList.forEach(el => {
        const cssName = el.dataset.name;

        if (cssName.includes(searchWord)) {
            el.classList.remove("hide");
        } else {
            el.classList.add("hide");
        }
    });
});