SearchEffect02- includes()

 

const searchBox = document.querySelector("#search-box"); //input 서치박스를 지정.
const cssList = document.querySelectorAll(".list ul li"); // 모든 li에 대해서 지정.
const cssCount = document.querySelector(".count em"); // 서치박스 우측 전체 속성 갯수에 대해서 지정.
cssList.forEach((element, index)=>{ //forEach를 이용해서 모든 li의 index를 불러온다.
	element.classList.add("show"); // 불러온 index에 CSS .show 클래스를 부여해준다. 
                               //밑에 있는 조건문이 적용되기 전 첫 화면에서는 모든 리스트가 보여야 하기때문에.
	cssCount.innerHTML = index +1; //index는 0번째 부터 시작하므로 1을 더해서 입력해준다.
})

searchBox.addEventListener("keyup", ()=>{ //서치박스를 key up 하는것에 대해 이벤트를 지정해준다.
const searchWord = searchBox.value;// 서치박스에 입력하는 값을 변수로 지정한다.

// console.log(searchWord);
            
cssList.forEach(el=>{ 
	const cssName = el.dataset.name; //css 속성값 (모든 값) 을 변수로 지정한다.
	// console.log(cssName);
	if(cssName.includes(searchWord)){ //if문 조건문에 includes()를 사용한다.
	el.classList.add("show"); //조건이 True면 show 클래스를 추가한다.
} else {
	el.classList.remove("show"); //그 이외의 결과는 show 클래스를 제거한다.
	}
})
})

includes()참고

자바스크립트

 

 

문자열 메서드 includes()를 이용한 검색 이펙트 예제 입니다.  includes()의 반환값은 boolean으로 나타나며, 

true, false 중 하나도 나옵니다.  조건을 검색할 때는 정규식 표현도 지원이 가능합니다.