서치 이펙트 3

서치 이펙트 만들기3

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

---

서치 이펙트3

원본 소스 보기

자바스크립트

추후 추가 예정

// 선택자
const searchKeyword = document.querySelectorAll(".search__info .keyword span");   // 알파벳
        const searchList = document.querySelectorAll(".search__list ul li");    // 목록 리스트
        const searchInfo = document.querySelector(".search__info .num");        // 전체 개수
        // 전체 개수 구하기
        searchInfo.textContent = searchList.length; // CSS 속성 총 개수 출력

        let count = 0;


        searchKeyword.forEach(el => {
            el.addEventListener("click", () => {
                const searchWord = el.innerText;    // 사용자가 클릭한 알파벳
                // console.log(searchWord);

                searchList.forEach(el => {
                    const cssName = el.querySelector("strong").innerText;   // CSS 속성 텍스트
                    // console.log(cssName)
                    // 알파벳 첫글자 == CSS 속성의 첫글자

                    if(searchWord.charAt(0) === cssName.charAt(0)) { // searchWord 의 첫글자가 cssName 와 같으면 아래문단을 실행
                        el.classList.remove("hide");
                        count++;    //갯수를 더함
                    } else {
                        el.classList.add("hide");
                    }

                    searchInfo.textContent = " : " + count; //class = num 검색한 키워드의 속성갯수를 출력
                });
                count = 0;  // 갯수 초기화
            });
        });