검색 이펙트 01- indexOf()

검색 이펙트 01

html, css, js 태그&메서드 검색 reference

결과

원본 소스 보기

JavaScript

"keyup" 이벤트를 통해 사용자가 입력한 키워드를 검색할 수 있게 만들었습니다.

<script>
const searchBox = document.querySelector(".search__box 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"); 
        }
    });
})
</script>

---