search Effect (1)

⭐️ 검색창 만들기 ⭐️

01. < script > 에 작성하기

    //선택자
    const searchBox = document.querySelector(".search__box input");   // 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;   // 사용자가 입력한 키워즈
        // console.log(searchWord)

        searchList.forEach(el => {
            // console.log(el.dataset.name)

            const cssName = el.dataset.name;

            if(cssName.indexOf(searchWord)){
                el.classList.add("hide")
            } else {

                //"abbr".indexOf("abbr")
                el.classList.remove("hide")    // indexOf 값이 0이 되는 값만 hide를 지워주기
            }
        });
    });

03. 결과보기

☛ 원본 소스 보기