search 03

search03

CSS 의 속성들이 있는 구조이다. 이번에는 검색창을 없애고 [a-z] 클릭?창을 만들었다. 클릭하면 설명창과 갯수가 나오는 구조이다.

원본 소스 보기

---

HTML

&ltdiv class="ketword">
    &ltdiv class="search__info">
    &ltdiv class="ketword">
        &ltspan>a&lt/span>
        &ltspan>b&lt/span>
        &ltspan>c&lt/span>
        &ltspan>d&lt/span>
        &ltspan>e&lt/span>
        &ltspan>f&lt/span>
        &ltspan>g&lt/span>
        &ltspan>h&lt/span>
        &ltspan>i&lt/span>
        &ltspan>j&lt/span>
        &ltspan>k&lt/span>
        &ltspan>l&lt/span>
        &ltspan>m&lt/span>
        &ltspan>n&lt/span>
        &ltspan>o&lt/span>
        &ltspan>p&lt/span>
        &ltspan>q&lt/span>
        &ltspan>r&lt/span>
        &ltspan>s&lt/span>
        &ltspan>t&lt/span>
        &ltspan>u&lt/span>
        &ltspan>v&lt/span>
        &ltspan>w&lt/span>
        &ltspan>x&lt/span>
        &ltspan>y&lt/span>
        &ltspan>z&lt/span>
    &lt/div>
    &ltdiv>전체 속성 갯수 : &ltspan class="num">&lt/span>&lt/div>
&lt/div>
&lt/div>

// 선택자
const searchKeyword = document.querySelectorAll(".search__info .ketword span"); //검색  박스
const searchList = document.querySelectorAll(".search__list ul li");        //목록 리스트
const searchInfo = document.querySelector(".num")                           //전체 갯수
// 전체 갯수 구하기
searchInfo.textContent = searchList.length;
searchKeyword.forEach(el => {
el.addEventListener("click", ()=> {
const searchWord = el.innerText;    //사용자가 클릭한 알파벳
//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");
} else {
    el.classList.add("hide");
}
});
});
});

---

CSS

 * 추가함
.search__info .ketword {
    text-align: center;
    margin-bottom: 10px;
}
.search__info .ketword  span{
    border: 2px solid var(--htmlColor);
    border-radius: 50px;
    padding: 10px;
    display: inline-block;
    margin-bottom: 4px;
}
.search__info .ketword span:hover{
    background-color: var(--htmlColor);
    color: #fff;