SITE | 검색유형 | includes( )

SEARCH 효과를 만들어보자 !

문자열 메서드 includes( )을 활용하여 검색 페이지를 만들어봅시다.

원본 소스 보기

script를 살펴봅시다 !

<script>
//선택자
const searchInfo = document.querySelector(".search__info .num")    //전체 갯수
const searchBox = document.querySelector(".search__box input");   //input 박스(검색 영역)
const searchList = document.querySelectorAll(".search__list ul li");   //목록 리스트

//전체 속성 갯수 설정
searchInfo.innerHTML = searchList.length

//검색 영역
searchBox.addEventListener("keyup", () => {
    const searchWord = searchBox.value;     //사용자가 입력한 키워드 searchBox에 저장

    searchList.forEach(el => {
        const cssName = el.dataset.name;    //dataset.name으로 css 속성의 모든 값을 불러옴
        
        //console.log(cssName)
        
        if(cssName.includes(searchWord)){   //값 중에서 사용자가 입력한 값이 있으면
            el.classList.remove("hide");    //숨김 해제
        } else {
            el.classList.add("hide");       //아니면 숨김 추가
        }
    });
});
</script>

const searchInfo = document.querySelector(".search__info .num")
searchInfo.innerHTML = searchList.length
> 전체 CSS 속성 갯수를 script로 추가시켜줍니다.

사용자가 입력한 키워드를 searchBox에 저장
↓
dataset.name으로 css 속성의 모든 값을 불러옴
↓
값 중에서 사용자가 입력한 값이 있으면 숨김 해제 / 없으면 숨김 추가