searchEffect01 - IndexOf()

  const searchBox = document.querySelector("#search-box"); // 사용자의 입력칸에 해당하는 태그의 id(search-box)를 불러와 입력 이벤트를 저장
  const cssList = document.querySelectorAll(".list ul li"); // li의 data-name(검색할 데이터 이름)

  searchBox.addEventListener("keyup", () => { 		// 키를 눌렀다가 떼었을때 이벤트
  const searchWord = searchBox.value; 				// 사용자가 입력한 데이터를 searchWord 변수에 저장

  cssList.forEach(ele => {						// cssList의 요소들(찾을 데이터 이름)을 foreach문으로 접근
  const cssName = ele.dataset.name; 			// CSS의 속성값을 저장

  if (cssName.indexOf(searchWord)) {		    // 사용자가 입력한 값이 cssName 안에 있을 경우(인덱스 값이 존재할경우)
      ele.classList.add("hide");				// 요소들에 hide 클래스 이름을 추가
        else {
          ele.classList.remove("hide");			// 입력한 값이 없을 경우 hide 클래스 이름을 삭제
       }
    });
  });

- keyup 이벤트를 사용 하는 이유

 

영문에서는 keypress 이벤트가 적용되지 않고 keydown 이벤트가 실행된 뒤에 텍스트가 입력되기 때문

 

 

- 키 입력 이벤트 순서

 

1. 사용자가 키보드 키를 누른다

2. keydown 이벤트가 발생한다

3. 글자가 입력된다

4. keypress 이벤트가 발생한다

5. 사용자가 키보드에서 손을 뗀다

6. keyup 이벤트가 발생한다

 

IndexOf() 참고