SearchEffect01

searchEffect01

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

---

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

HTML

검색창, 전체 데이터의 갯수를 확인하기 위한 영역, 태그 데이터를 입력합니다.
키워드와 리스트의 데이터를 비교하기 위해, 각 리스트에 data-name="" 속성을 부여합니다.

<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"><strong>accent-color</strong> : 특정 요소에 색상을 지정할 때 사용됩니다.</li>
                    <li data-name="align-content"><strong>align-content</strong> : 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
                    <li data-name="align-items"><strong>align-items</strong> : 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
                    <li data-name="align-self"><strong>align-self</strong> : 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.</li>
                    <li data-name="all"><strong>all</strong> : 요소의 속성을 초기화 또는 상속을 설정합니다.</li>
                    <li data-name="animation"><strong>animation</strong> : 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
                    <li data-name="animation-delay"><strong>animation-delay</strong> : 애니메이션 지연 시간을 설정합니다.</li>
                    <li data-name="animation-direction"><strong>animation-direction</strong> : 애니메이션 움직임 방향을 설정합니다.</li>
                    ...
                </ul>
            </div>
        </div>
    </div>
</main>
<!-- //main -->

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

JAVASCRIPT

먼저 input 박스와 html에 입력한 데이터 리스트를 선택하여 주고, input박스에 사용자가 단어를 입력하였을 때 사용자가 입력한 키워드와 리스트의 data-name이 같다면, 키워드와 동일하게 시작하는 태그들은 출력이되고 나머지 태그들은 class명에 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", () => {     // keyup : 키를 눌렀다 떼었을 때
    const searchWord = searchBox.value;     //사용자가 입력한 키워드

    searchList.forEach(el => {
        const cssName = el.dataset.name;

        if (cssName.indexOf(searchWord)) {
            el.classList.add("hide");   //사용자가 검색창에 입력한 키워드만 출력(나머지 숨김)
        } else {
            el.classList.remove("hide");    //indexOf값이 0(false)이 되는 값만 hide를 지워줍니다.
        }
    });
});