SearchEffect02

스크립트를 이용한 서치효과 만들기 02

스크립트를 이용하여 HTML 태그를 검색하는 효과를 만들 수 있습니다.

원본 소스 보기

Script

//선택자
const searchBox = document.querySelector(".search__box 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;     //사용자가 입력한 키워드

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

        //"all".includes("all")   //true
        if(cssName.includes(searchWord)) {
            el.classList.remove("hide");
        } else {
            el.classList.add("hide");
        }
    });
})

"문자열".includes(검색값)
"문자열".includes(검색값, 위치값)

유형 02에서는 includes()를 통해서 스크립트를 작성 하였습니다. includes()메서드는 문자열 포함 여부를 검색하여, 불린(true, false)을 반환합니다.

searchInfo.textContent = searchList.length;

선택자(searchInfo)를 만들어 속성의 갯수도 확일 할 수 있습니다.