searchEffect03

searchEffect03

charAt()를 이용하여 속성 첫글자 검색하기.

원본 소스 보기 원본 사이트

---

HTML

keyword 별로 검색이 가능하도록 span 태그를 사용하여 알파벳별로 검색이 가능하도록 만듭니다.

 <div class="search__wrap" >
    <span >charAt()를 이용하여 검색하기 </span >
    <h1 >CSS 속성 첫글자 검색하기 </h1 >

    <div class="search__info" >
        <div class="keyword" >
            <span >a </span >
            <span >b </span >
            <span >c </span >
            <span >d </span >
            <span >e </span >
            <span >f </span >
            <span >g </span >
            <span >h </span >
            <span >i </span >
            <span >j </span >
            <span >k </span >
            <span >l </span >
            <span >m </span >
            <span >n </span >
            <span >o </span >
            <span >p </span >
            <span >q </span >
            <span >r </span >
            <span >s </span >
            <span >t </span >
            <span >u </span >
            <span >v </span >
            <span >w </span >
            <span >x </span >
            <span >y </span >
            <span >z </span >
        </div >
        <div >
            전체 속성 갯수 :  <span class="num" >0 </span >
        </div >
    </div >
    <div class="search__list" >
        <div class="css" >
            <ul >
                <li><strong>accent-color</strong> : 일부 요소가 생성하는 사용자 인터페이스 컨트롤의 강조색을 지정합니다.</li>
                
            </ul >
        </div >
    </div >
</div >

CSS

keyword와 span에 대한 css내용을 추가합니다.

.search__info .keyword {
    text-align: center;
    margin-bottom: 10px;
}

.search__info .keyword span {
    border: 2px solid var(--htmlColor);
    border-radius: 50px;
    padding: 10px;
    display: inline-block;
    margin-bottom: 4px;
}

.search__info .keyword span:hover {
    background-color: var(--htmlColor);
    color: #fff;
    cursor: pointer;
}

JAVASCRIPT

charAt()의 문자열에서 원하는 문자열을 찾고 포함되어 있으면 출력하는 방식을 사용하였습니다. strong 태그의 데이터를 불러와서 출력하도록 하였습니다.

//선택자
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;    //사용자가 클릭한 알파벳
        //console.log(searchKeyword);

        searchList.forEach(el => {
            const cssName = el.querySelector("strong").innerText;   //CSS 속성 텍스트
            //console.log(cssName)

            //알파벳 첫글자 == CSS 속성의 첫글자
            if(searchWord.charAt(0) === cssName.charAt(0)){
                el.classList.remove("hide");
            } else {
                el.classList.add("hide");
            }
        })
    });
});