searchEffect03 - charAt()

     	const searchBox = document.querySelectorAll(".search span"); 	// search 클래스 안의 알파벳 버튼
        const cssList = document.querySelectorAll(".list ul li"); 		// 속성 목록(li 태그)
        const cssCount = document.querySelector(".count em"); 			// 속성 개수

        // 모든 데이터 보여주기
        cssList.forEach((li, index) => {								// css 속성 목록에 있는 데이터들을 전부 접근
            li.classList.add("show");									// 속성 목록 전부에 show 클래스 이름 추가
            cssCount.innerHTML = index + 1;								// css 속성 개수를 배열 인덱스만큼 표시(배열 인덱스는 0번지 부터 시작하기 때문에 + 1 추가)
        });

        // 알파벳 아이콘을 클릭하면 클릭한 데이터의 값을 가져오기
        searchBox.forEach(ele => {
            ele.addEventListener("click", () => {
                const searchWord = ele.innerText; 				// 알파벳의 첫 글자

                cssList.forEach(ele => {
                    const cssName = ele.dataset.name; 			// css 속성값
                    const cssTypeValue = ele.dataset.type; 		// css 유형값

                    // 알파벳의 첫 글자(a ~ z)와 css 속성의 글자와 비교
                    if (searchWord.charAt(0) === cssName.charAt(0) || searchWord === cssTypeValue) { 	// charAt(0) 첫번째 글자, charAt(1) 두번째 글자 
                     																					// 또는 클릭한 span의 속성이 css 타입(data-type) 문자와 같을 경우
                        ele.classList.add("show");														// 해당 태그에 show 클래스 이름 추가
                    } else {
                        ele.classList.remove("show");													// 같지 않을 경우 show 클래스 이름 삭제
                    }
                });

            });
        });

charAt() 참고