23/10/19 TIL __ 검색기능_ 제이쿼리 없이 순수 바닐라 자바스크립트

 

 

 

🚗   바닐라 자바스크립트로 검색 기능 구현하기

 

 

개인과제로 바닐라 자바스크립트만 이용해서(제이쿼리 제외) 페이지를 만들어 봤다.😆

그중에서 오늘은 검색 기능에 대한 부분을 적으려고 한다. 

 

 

 

💡 구상

1. 검색 버튼을 누르거나, 엔터키를 입력하면 검색이 된다.
2. input에 입력된 값을 가지고 와서, 가지고 있던 데이터 들과 비교 한다.
3. 동일한 것 데이터가 있다면 그것들을 보여주고, 동일한 데이터가 없다면 검색 결과가 없다고 알려준다.

 

 

• 이벤트 리스너 달아주기

//검색버튼 클릭하면 이벤트 실행
document.querySelector("#searchBtn").addEventListener("click", function (e) {
  return search();
});

//엔터 키 입력하면 이벤트 실행
document.querySelector("#searchInput").addEventListener("keyup", function (e) {
  if (e.keyCode == 13 || e.which == 13) {
    return search();
  }
});

 

❗️❗️이 부분에서 이슈가 있었다. ❗️❗️

 

input에 입력 하고, 엔터키를 치면, 입력값과 동일한 결과가 잘 출력 되었는데,

이후 지우려고 백스페이스 키를 입력하니 입력되지 않았다. 

 

 

 

search() 함수의 문제일 것이라고 생각해서

해당 함수에서 동일한 데이터가 없는 경우 출력해줄 부분들을 제외해 보니 잘 작동이 되었다..

그렇지만 나는 검색 결과가 나오지 않았을 경우 결과가 없다고 말해주고 싶었고, 열심히 다른 방법을 찾아봤다. 

 

 

 

알고보니 ..!

 

❗️❗️제대로 몰랐던 부분으로 인한 몇가지 문제가 있었다. ❗️❗️

1. keydown 이벤트는 키를 누른 순간 발생하며, input 값이 들어오기 전에 이벤트를 감지해 이벤트가 일어난다. 
2. e.preventDefault() 는 이벤트 버블링을 단순히 막는 애가 아니라! 브라우저의 고유 동작을 중지시킨다.
3. e.stopPropagation() 은 부모요소로 이벤트 버블링 되는 현상을 막아준다. 
4. 이벤트 버블링이 진행되는 방향은 부모요소로 번져나간다. 

 

 

 

처음에 시도했던 코드는 이런식이였다

//검색버튼 클릭하면 이벤트 실행
document.querySelector("#searchBtn").addEventListener("click", function (e) {
  e.preventDefault();
  return search();
});

//엔터 키 입력하면 이벤트 실행
document.querySelector("#searchInput").addEventListener("keydown", function (e) {
  e.preventDefault();
  if (e.keyCode == 13 || e.which == 13) {
    return search();
  }
});

 

문제는 !!

keydown으로 시도했었고,

e.preventDefault() 를 이벤트 버블링 막는 안전한 애!! 정도로만 생각하고 사용했었다. 

 

 

 

keyup 으로 바꾸니깐 마법처럼 input 값이 작성하고 백스페이스 이용해서 삭제도 가능하며, 검색결과도 잘 나왔다. 

왜 그런지를 몰랐었는데, 이렇게 알고나니 정말 기쁘다!!

 

 

 

참고한 블로그

https://velog.io/@nemolog/231020TIL

231020_TIL