SearchEffect01- indexOf()

const searchBox = document.querySelector("#search-box"); // input 서치 박스를 지정.
const cssList = document.querySelectorAll(".list ul li"); // 모든 li를 지정.


searchBox.addEventListener("keyup", ()=>{ // input 서치박스를 key up 했을 때를 지정.
	const searchWord = searchBox.value;//사용자가 입력한 데이터 저장소 
	cssList.forEach(el=>{
	console.log(el.dataset.name); // 입력한 데이터 저장소가 올바르게 되었는지 콘솔로그로 확인.

	const cssName = el.dataset.name; //css 속성값(data-name)만 골라서 배열화 시킴.

	if(cssName.indexOf(searchWord)){ // 배열화 시킨 data-name를 indexOf()를 사용하여 검색.
		el.classList.add("hide");  //if문을 이용하여 조건을 만든다. 
	} else {
 		el.classList.remove("hide"); // css에 hide 라는 클래스를 만들어서 지정 후 서치박스에서 검색 했을 때 일치하는 결과에 따라 적용해준다.

		}
})
// console.log(searchWord);
})
  

indexOf참고

자바스크립트

 

자바스크립트의 indexOf()를 이용한 검색 이펙트 만들기 입니다. 

기본적인 document.querySelecor 부터 

클래스를 추가, 삭제, 편집하는 classList 까지 이때까지 배운 기초문법을 활용하여 예제를 만들어봅시다.