[JS] 검색어 자동완성 구현시 change와 keyup event를 같이 쓰는 이유

3. events

const searchInput = document.querySelector(".search");
const suggestions = document.querySelector(".suggestions");

searchInput.addEventListener("change", displayMatches);
searchInput.addEventListener("keyup", displayMatches);

• search클래스를 가진 input box가 변하거나 key가 눌릴때마다 displayMatches를 불러옵니다.
• keyup은 키보드를 이용한 입력만 감지함.
  • (마우스 클릭으로 붙혀넣기하거나 자동완성 단어를 클릭해서 입력되는 이벤트 인식x)
• change는 외부를 눌렀을때만 인지함.
  • 키보드 단어 하나하나 누를때마다의 변화를 인지못함. 외부로 커서를 옮겨야 인식한다.
• 두 가지 모두써야 마우스 클릭으로 자동완성하는 경우도 검색을 할수있고 기존 자동완성의 목적인  방지할 수 있음.