SearchEfferct02

searchEffect02

includesOf() 문자열 메서드를 사용하여 CSS 속성을 검색할 수 있게 코딩하였습니다.

---

원본 소스 보기 원본 사이트 보기

HTML

전체적인 HTML 구조는 동일하며, search__list(속성 리스트)에 data-type 속성을 추가하여 타입으로도 검색이 가능하도록 하였습니다.

<header id="header">
    <nav>
        <ul>
            <li class="active"><a href="searchEffect01_css.html">1</a></li>
            <li><a href="searchEffect02.html">2</a></li>
            <li><a href="searchEffect03.html">3</a></li>
            <li><a href="searchEffect04.html">4</a></li>
            <li><a href="searchEffect05.html">5</a></li>
            <li><a href="searchEffect06.html">6</a></li>
        </ul>
    </nav>
</header>
<!-- //header -->

<main id="main">
    <div class="search__wrap">
        <span>indexOf()를 이용하여 검색하기</span>
        <h1>CSS 속성 검색하기</h1>
        <div class="search__box">
            <label for="search">검색하기</label>
            <!-- 웹표준 준수(숨김처리) -->
            <input type="text" id="search" placeholder="CSS 속성을 입력해주세요!">
            <!-- 검색창 기본 문구 -->
        </div>
        <div class="search__info">
            <div>전체 속성 갯수<span class="num">0</span></div>
        </div>
        <div class="search__list">
            <div class="html">
                <ul>
                    <li data-name="accent-color" data-type="플렉스"><strong>accent-color</strong> : 특정 요소에 색상을 지정할 때
                    사용됩니다.</li>
                    <li data-name="align-content" data-type="플렉스"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬
                        상태를 설정합니다.</li>
                    <li data-name="align-items" data-type="플렉스"><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬
                        상태를 설정합니다.</li>
                    <li data-name="align-self" data-type="플렉스"><strong>align-self</strong> : 개별적인 콘텐츠 아이템의 정렬 상태를
                        설정합니다.</li>
                    <li data-name="all" data-type="기타"><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
                    <li data-name="animation" data-type="애니메이션"><strong>animation</strong> : 애니메이션과 관련된 속성을 일괄적으로
                        설정합니다.</li>
                    <li data-name="animation-delay" data-type="애니메이션"><strong>animation-delay</strong> : 애니메이션 지연
                        시간을 설정합니다.</li>
                    <li data-name="animation-direction" data-type="애니메이션"><strong>animation-direction</strong> :
                        애니메이션 움직임 방향을 설정합니다.
                    </li>
                    <li data-name="animation-duration" data-type="애니메이션"><strong>animation-duration</strong> : 애니메이션
                        움직임 시간을 설정합니다.
                    </li>
                    <li data-name="animation-fill-mode" data-type="애니메이션"><strong>animation-fill-mode</strong> :
                        애니메이션이 끝난 후의 상태를
                        설정합니다.</li>
                    <li data-name="animation-iteration-count" data-type="애니메이션">
                        <strong>animation-iteration-count</strong> : 애니메이션의 반복
                        횟수를 설정합니다.</li>
                    <li data-name="animation-name" data-type="애니메이션"><strong>animation-name</strong> : 애니메이션
                        keyframe 이름을 설정합니다.</li>
                    <li data-name="animation-play-state" data-type="애니메이션"><strong>animation-play-state</strong> :
                        애니메이션 진행상태를 설정합니다.
                    </li>
                    <li data-name="animation-timeline" data-type="애니메이션"><strong>animation-timeline</strong> : </li>
                    <li data-name="animation-timing-function" data-type="애니메이션">
                    <strong>animation-timing-function</strong> : 애니메이션
                        움직임의 속도를 설정합니다.</li>
                    ...
                </ul>
            </div>
        </div>
    </div>
</main>
<!-- //main -->

<footer id="footer">
    <a href="mailto:tjrwns3650@gmail.com">tjrwns3650@gmail.com</a>
</footer>
<!-- //footer -->

JAVASCRIPT

js 코딩은 앞의 01번과 동일하나, indexOf() -> includes()를 사용하여 사용자가 검색한 문자열이 data-name의 특정 요소를 포함하고 있다면 true를 반환하여 클래스 hide를 제거하도록하고, false라면 hide를 추가하여 숨겨지도록 하였습니다.

//선택자
const searchBox = document.querySelector(".search__box input");   //input 박스
const searchList = document.querySelectorAll(".search__list ul li");    //목록 리스트
const searchInfo = document.querySelector(".search__info .num");     //전체 갯수

//속성 갯수 설정하기
searchInfo.textContent = searchList.length;

//검색 영역
searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;     //사용자가 입력한 키워드
    const searchType = searchBox.value;     //사용자가 입력한 타입

    searchList.forEach(el => {
        const cssName = el.dataset.name;        //CSS 속성 모든 값
        const cssType = el.dataset.type;        //CSS 타입 모든 값
        // console.log(cssName);

        if (cssName.includes(searchWord) | cssType.includes(searchType)) {
            el.classList.remove("hide");
        } else {
            el.classList.add("hide");
        }

    });
});