SEARCH | 검색 유형03

SEARCH 효과를 만들어보자 !

문자열 메서드 charAt( )을 활용하여 검색 페이지를 만들어봅시다.
이번에는 검색 효과가 아닌 키워드별로 나누어 볼 수 있도록 만들어주었습니다.

---

원본 소스 보기

HTML을 살펴봅시다 !

<main id="main">
    <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>
    </div>
</main>

+ 검색 부분을 없애고 알파벳 키워드를 표시

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;
}

+ keyword 부분이 추가되면서 그에 맞게 CSS에도 디자인 추가

script를 살펴봅시다 !

<script>
//선택자
const searchKeyword = document.querySelectorAll(".search__info .keyword span");   //알파벳
const searchList = document.querySelectorAll(".search__list ul li");   //목록 리스트
const searchInfo = document.querySelector(".search__info .num") ;   //전체 갯수
let count = 0;

//전체 속성 갯수 설정
searchInfo.innerHTML = searchList.length;

searchKeyword.forEach(el => {
    el.addEventListener("click", () => {
        const searchWord = el.innerText;    //사용자가 클릭한 알파벳
        searchWord.textContent = searchInfo.length;     //선택한 알파벳 갯수

        //console.log(searchWord);

        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");
                count++;
            } else {
                el.classList.add("hide");
            }
            searchInfo.textContent = count;
        });
        count = 0;
    });
});
</script>

+ 전체 속성 갯수에서 선택한 알파벳으로 시작하는 속성의 갯수가 나올 수 있도록 설정

+ charAt( )속성을 사용해 알파벳 "첫글자"와 CSS "첫글자"가 같을 경우, 같지 않을 경우로 설정