search Effect (2)

⭐️ 검색창 만들기 ⭐️

01. < script > 에 작성하기

        //선택자
    const searchBox = document.querySelector(".search__box input");  // input 박스 , 검색 영역
    const searchList = document.querySelectorAll(".search__list ul li")  // 목록 리스트
 
    //속성 갯수 설정하기
 
    for(i=1; i <= searchList.length; i++){
        const searcjInfo = document.querySelector(".search__info .num")
    
        searcjInfo.innerHTML =i;
    }
 
    searchList.forEach(el => {
        el.classList.add("show")
    });
 
    //
    searchBox.addEventListener("keyup", () => {
        const searchWord = searchBox.value;   // 사용자가 입력한 키워드
 
        searchList.forEach(el => {
            const cssName = el.dataset.name;   // CSS 속성 모든 값
            //console.log(cssName)
 
            "all".includes("all")   // 있으면 true 로 나옴
 
            if(cssName.includes(searchWord)){
                el.classList.remove("show");
 
            } else {
                el.classList.add("show");
            }
        });
    });

03. 결과보기

☛ 원본 소스 보기