SearchEffect - includes( )

        const searchBox = document.querySelector("#search-box");		//search-box를 변수에 저장
        const cssList = document.querySelectorAll(".list ul li");		//다수의 li를 변수에 저장
        const cssCount = document.querySelector(".count em");			//cssCount를 em에 저장

        cssList.forEach((element, index) => {		//리스트에 element, index를 정의
            element.classList.add("show");				//리스트에 show가 붙은 이벤트 추가
            cssCount.innerHTML = index + 1;				//총 갯수 카운트 증가
            });

        searchBox.addEventListener("keyup", () => {	 // input 박스를 클릭했을 때 이벤트 설정
            const searchWorld = searchBox.value;		 // 사용자가 입력한 데이터 저장소 변수에 저장

            //console.log(searchWorld);

            cssList.forEach(el => {
                const cssName = el.dataset.name; //CSS 속성 모든 값을 변수에 저장
                //console.log(cssName);

                if(cssName.includes(searchWorld)){
                    el.classList.add("show");		   //데이터가 있으면 클래스 show를 추가
                } else {
                    el.classList.remove("show");		   //데이터가 있으면 클래스 show 삭제
                }
            })
        })
 

includes( ) 참조

 

includes( )는 배열이 특정 요소를 포함하고 있는지 판별해 메서드 입니다.

includes( ) 메서드를 사용하여 사용자가 같은 입력한 값과 배열속의 데이터가 일치 하는게 있으면 단어가 나오는 사이트를 만들어 보았습니다.

 

자바스크립트

https://parkjongho1.github.io/webs_ho/javascript/effect/searchEffect02.html

Search Effect