서치 이펙트 03

서치 이펙트

자바스크립트를 이용해서 CSS 속성 요소를 검색하는 효과 만들기입니다.

---

서치 이펙트 03

charAt( ) 메소드를 이용해서 CSS 속성 요소를 검색하는 효과입니다.

---

1. 검색 목록 만들기

//SCRIPT 파트
//선택자
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;
// document.querySelector(".num").innerHTML = searchList.length;

// searchList.forEach((el,i,a) => {
//     document.querySelector(".num").innerHTML = a.length;
// });
searchKeyword.forEach(el => {
    el.addEventListener("click", () => {
        const searchWord = el.innerText;        //사용자가 클릭한 알파벳
        searchList.forEach(el => {
            const cssName = el.querySelector("strong").innerText;       //속성 텍스트
            //알파벳 첫글자 == CSS 속성의 첫글자
            if (searchWord.charAt(0) === cssName.charAt(0)){
                el.classList.remove("hide");
                el.classList.add("se");
            } else {
                el.classList.add("hide");
            }
        });
    });
});

원본 소스 보기