searchEffect01 - indexOf()

    <script>
        const searchBox = document.querySelector("#search-box"); //searchBox를 선언 : 사용자가 적은 단어를 불러온다
        const cssList = document.querySelectorAll(".list ul li"); //cssList 선언 : 리스트 목록을 불러온다

        searchBox.addEventListener("keyup", () => { //saerchBox에서 무언가를 출력했을 때 이벤트를 추가한다
            const searchWord = searchBox.value; //사용자가 입력한 데이터 저장소
            //console.log(searchWord);

            cssList.forEach(el => {
                console.log(el.dataset.name)

                const cssName = el.dataset.name; //cssName 선언 : 각각의 cssList에서의 data-name이다
                
                if(cssName.indexOf(searchWord)){ //사용자가 적은 값과 cssName을 index로 비교한다
                    el.classList.add("hide"); //있으면 "hide"추가
                } else {
                    el.classList.remove("hide"); //없으면 ""hide" 제거
                }
            })
        })
    </script>

 

선언한 것들 : searchBox / cssList / searchWord / cssName

1시간 30분 헤맸는데, 

style에서 ul li.hide라 써야하는 것을 띄어쓰기를 해서 ul li .hide라 적어서 실행이 안됐다

ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ 

 

링크 https://sungilryuu.github.io/webs_class/javascript/effect/searchEffect01.html