검색 효과 3

검색 이펙트

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

> 사이트 미리보기

원본 소스 보기

자바스크립트

해당 이펙트의 자바스크립트는 아래에 이어지는 내용과 같습니다. 먼저 검색영역(사용자가 검색하고 싶은 내용을 입력하는 곳)과, 목록리스트를 선택하는 선택자를 지정합니다. 이후 사용자가 입력한 키워드를 변수에 저장한 후, 리스트의 데이터 값에 사용자 키워드가 포함되는지 확인하며 리스트를 숨기고 보이게 합니다. 또한 사용자가 키워드 버튼을 눌러 특정 알파벳으로 시작하는 속성만 볼 수 있도록 하였습니다. 리스트의 테이터 값에 사용자 키워드가 포함되는지는, 문자열 메서드의 하나인 indexOf() / search() 메서드를 사용합니다.

> 선택자

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

//선택자
const searchKeyword = document.querySelectorAll(".search__info .keyword span");    //알파벳
const searchList = document.querySelectorAll(".search__list ul li");            //목록 리스트
const searchInfo = document.querySelector(".search__info .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").innerHTML;   //속성 텍스트
            //console.log(searchWord)

            //알파벳 첫글자 == CSS 속성의 첫글자
            if(searchWord.charAt(0) === cssName.charAt(0)){
                el.classList.remove("hide");
            } else {
                el.classList.add("hide");
            }
        });
    });
});

HTML

다음은 HTML 코드의 일부입니다. 키워드 검색이 가능하도록 span 태그를 만들어 각 알파벳을 작성하였습니다.

<div class="search__wrap">
    <span>indexOf() / search()를 이용하여 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">
            <span>a</span>
            <span>b</span>
            <span>c</span>
            <span>d</span>
            <span>e</span>
            <span>f</span>
            <span>g</span>
            <span>h</span>
            <span>i</span>
            <span>j</span>
            <span>k</span>
            <span>l</span>
            <span>m</span>
            <span>n</span>
            <span>o</span>
            <span>p</span>
            <span>q</span>
            <span>r</span>
            <span>s</span>
            <span>t</span>
            <span>u</span>
            <span>v</span>
            <span>w</span>
            <span>x</span>
            <span>y</span>
            <span>z</span>
        <div class="type">플렉스, 애니메이션, 백그라운드, 기타 등등 유형 별로 검색해 보세요!</div>
        <div>전체 속성 갯수 : <span class="num">0</span></div>
    </div>
    <div class="search__list">
        <ul>
            <div class="css">
                <li><strong>accent-color</strong> : accent-color</li>
                <li><strong>align-content</strong> : align-content</li>
                <li><strong>align-items</strong> : align-items는 flex나 grid의 위치를 설정합니다.</li>
                <li><strong>align-self</strong> : align-self</li>
                <li><strong>all</strong> : all</li>
                <li><strong>animation</strong> : animation은 애니메이션과 관련된 속성을 일괄적으로 설정합니다.</li>
                            .
                            .
                            .
                <li><strong>animation-delay</strong> : animation-delay는 애니메이션의 지연 시간을 설정합니다.</li>
                <li><strong>animation-direction</strong> : animation-direction은 애니메이션의 움직임 방향을 설정합니다.</li>
                <li><strong>animation-duration</strong> : animation-duration은 애니메이션의 움직임 시간을 설정합니다.</li>
                <li><strong>animation-fill-mode</strong> : animation-fill-mode는 애니메이션이 끝난 후의 상태를 설정합니다.</li>
                <li><strong>animation-iteration-count</strong> : animation-iteration-count는 애니메이션의 반복 횟수를 설정합니다.</li>
                <li><strong>animation-name</strong> : animation-name은 애니메이션 keyframe 이름을 설정합니다.</li>
            </div>
        </ul>
    </div>
</div>