SEARCH | 검색 유형01

SEARCH 효과를 만들어보자 !

SEARCH 효과를 만들어 HTML/CSS/JAVASCRIPT 검색 페이지를 만들어봅시다.

원본 소스 보기

script를 살펴봅시다 !

<script>
//선택자
const searchBox = document.querySelector(".search__box input");   //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를 지워준다.
        }
    });
});
</script>

addEventListener("keyup") |
이벤트 메서드 중 keyup은 키를 눌렀다가 뗐을 때 이벤트가 실행됩니다.

indexOf |
문자열 메서드인 indexOf는 문자열에서 특정 문자의 위치를 찾아 숫자로 반환시켜 줍니다.

indexOf( )를 활용해 0(false)이 되는 값만 hide를 지워 원하는 값이 나타날 수 있도록 해줍니다.