SearchEffect - charAt( )

	    const searchBox = document.querySelectorAll(".search span");        //알파벳 버튼들 변수에 저장
        const cssList = document.querySelectorAll(".list ul li");       //속성 리스트 변수에 저장
        const cssCount = document.querySelector(".count em");           //속성 갯수 변수에 저장

        //모든 데이터 보이기
        cssList.forEach((li, index) => {            //리스트에 element, index를 정의
            li.classList.add("show");               //리스트에 show가 붙은 이벤트 추가
            cssCount.innerHTML = index + 1;         //총 갯수 카운트
        })

        //알파벳을 클릭하면 데이터 값을 가져와야 한다.
        //searchBox.addEventlistner is not a function
        searchBox.forEach(el => {
            el.addEventListener("click", () => {           
                const searchWord = el.innerText;             //searchBox의 li를 를 클릭했을 때 searchWord에 저장
                // console.log(searchWord)

                cssList.forEach(el => {
                    const cssName = el.dataset.name;        //CSS 속성 값 (data-name)
                    // console.log(cssName)
                    const cssType = el.dataset.type;        //CSS 타입 값 (data-type)

                    //알파벳 첫글자 == CSS 속성의 첫글자
                    if(searchWord.charAt(0) === cssName.charAt(0) || searchWord.charAt(0) === cssType.charAt(0)) {  
                          // searchWord 와 cssName 첫글자가 같을경우 혹은 searchWord 와 cssType 첫글자가 같을경우                                                                                                  
                        el.classList.add("show");           //데이터가 있으면 클래스 show를 추가
                    } else {    
                        el.classList.remove("show");        //데이터가 있으면 클래스 show 삭제
                    }
                })
            })
        })  
    

charAt( ) 참조

자바스크립트

https://parkjongho1.github.io/webs_ho/javascript/effect/searchEffect03.html

Search Effect