SearchEffect03

스크립트를 이용한 서치효과 만들기 03

스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다.

원본 소스 보기

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;

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");
            } else {
                el.classList.add("hide");
            }
        })
    })
});