검색 효과2

검색 이펙트

페이지에 리스트를 만들고, input박스를 만들어 사용자가 리스트의 내용을 검색할 수 있게 한 효과입니다.

> 사이트 미리보기

원본 소스 보기

자바스크립트

해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 검색영역(사용자가 검색하고 싶은 내용을 입력하는 곳)과, 목록리스트를 선택하는 선택자를 지정합니다. 이후 사용자가 입력한 키워드를 변수에 저장한 후, 리스트의 데이터 값에 사용자 키워드가 포함되는지 확인하며 리스트를 숨기고 보이게 합니다. 이를 위해 각 리스트에 data-name="" 속성을 부여하여 데이터 값을 비교할 수 있도록 합니다. 리스트의 테이터 값에 사용자 키워드가 포함되는지는, 문자열 메서드의 하나인 includes() 메서드를 사용합니다.

> 선택자

다중선택이 필요한 경우, querySelector가 아닌 querySelectorAll을 사용해야 조건에 해당하는 전체에서의 선택이 가능해집니다. 목록의 리스트는 여러개이므로 querySelectorAll을 사용합니다.

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

//속성 갯수 설정하기
document.querySelector(".num").innerHTML = searchList.length;

//
searchBox.addEventListener("keyup", ()=>{
    const searchWord = searchBox.value; //사용자 입력 키워드

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

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

HTML

다음은 HTML 코드의 일부입니다. 키워드와 리스트의 데이터를 비교하기 위해, 각 리스트에 data-name="" 속성을 부여합니다. 데이터의 유형을 분류하기 위해 data-type="" 속성 또한 부여했습니다.

<div class="search__wrap">
    <span>includes()를 이용하여 CSS 속성 검색하기</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 class="type">플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해 보세요!</div>
        <div>전체 속성 갯수 : <span class="num">0</span></div>
    </div>
    <div class="search__list">
        <ul>
            <div class="css">
                <li data-name="accent-color" data-type= "기타"><strong>accent-color</strong> : accent-color</li>
                <li data-name="align-content"  data-type= "플렉스"><strong>align-content</strong> : align-content</li>
                <li data-name="align-items" data-type= "플렉스"><strong>align-items</strong> : align-items는 flex나 grid의 위치를 설정합니다.</li>
                <li data-name="align-self" data-type= "플렉스"><strong>align-self</strong> : align-self</li>
                <li data-name="all"  data-type= "기타"><strong>all</strong> : all</li>
                <li data-name="animation" data-type= "애니메이션"><strong>animation</strong> : animation은 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
                            .
                            .
                            .
                <li data-name="animation-delay" data-type= "애니메이션"><strong>animation-delay</strong> : animation-delay는 애니메이션의 지연 시간을 설정합니다.</li>
                <li data-name="animation-direction" data-type= "애니메이션"><strong>animation-direction</strong> : animation-direction은 애니메이션의 움직임 방향을 설정합니다.</li>
                <li data-name="animation-duration" data-type= "애니메이션"><strong>animation-duration</strong> : animation-duration은 애니메이션의 움직임 시간을 설정합니다.</li>
                <li data-name="animation-fill-mode" data-type= "애니메이션"><strong>animation-fill-mode</strong> : animation-fill-mode는 애니메이션이 끝난 후의 상태를 설정합니다.</li>
                <li data-name="animation-iteration-count" data-type= "애니메이션"><strong>animation-iteration-count</strong> : animation-iteration-count는 애니메이션의 반복 횟수를 설정합니다.</li>
                <li data-name="animation-name" data-type= "애니메이션"><strong>animation-name</strong> : animation-name은 애니메이션 keyframe 이름을 설정합니다.</li>
            </div>
        </ul>
    </div>
</div>