검색 유형 01

검색 유형 01

indexOf()를 이용하여 단어를 검색하였을 때 정보가 나오도록 작업하는 방식 입니다.

01. HTML

먼저 HTML 입니다. 정리를 해주는건 리스트로 만드는 것은 같지만
데이터가 어떤 것인지 구별하기 위해 data-name 을 넣어 지정해 줄 수 있도록 하였습니다.

 

     <div class="search__wrap">
        <span>indexOf()를 이용하여 검색하기</span>
        
        <h1> HTML 태그 검색하기 </h1>
        <div class="search__box">
            <label for="search">검색하기</label>
            <input type="text" id="search" placeholder="HTML 태그를 검색해주세요.">
        </div>
        
        <div class="search__list">
            <div class="css">
                <ul>
                    <li data-name="accent-color"><strong>accent-color</strong> : accent-color 태그는 일부 요소에서 생성된 사용자 인터페이스 컨트롤의 강조 색상을 설정 합니다.</li>
                    <li data-name="align-content"><strong>align-content</strong> : align-content 태그는 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다.</li>
                    <li data-name="align-items"><strong>align-items</strong> : align-items 태그는 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다.</li>
                    <li data-name="align-self"><strong>align-self</strong> : align-self 태그는 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다.</li>
                    <li data-name="all"><strong>all</strong> : all 태그는 다른 페이지 이동을 설정합니다.</li>
                    <li data-name="animation"><strong>animation</strong> : animation 태그는 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
                    <li data-name="animation-delay"><strong>animation-delay</strong> : animation-delay 태그는 애니메이션 지연 시간을 설정합니다.</li>
                    <li data-name="animation-direction"><strong>animation-direction</strong> : animation-direction 태그는 애니메이션 움직임 방향을 설정합니다..</li>
                    <li data-name="animation-duration"><strong>animation-duration</strong> : animation-duration 태그는 애니메이션 움직임 시간을 설정합니다.</li>
                    <li data-name="animation-fill-mode"><strong>animation-fill-mode</strong> : animation-fill-mode 태그는 애니메이션이 끝난 후의 상태를 설정합니다.</li>
                </ul>
            </div>
        </div>
    </div> 

02. javascript

아래는 자바 스크립트 입니다. 선택자를 만드는 방식은 퀴즈 이펙트 01의 유형과 똑같지만 forEach문에 'keyup'작업을 넣어 검색하였을 때에 if문에서 사용자가 쓴 키워드가 indexOf()로 구별하여 일치하였을 때에 검색값이 나오도록 하였습니다.

 

    // 선택자 
    const searchBox = document.querySelector(".search__box input");      //검색 영역
    const searchList = document.querySelectorAll(".search__list ul li")       //목록 리스트

    searchBox.addEventListener("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이 되는 값만 hide를 지워줍니다.
            }

        });
    }); 

원본 소스 보여주기

원본 사이트 보여주기