[프로젝트] 딴짓추적표 | 3. 검색기능 추가하는 법

내가 한 딴짓을 검색할 수 있는 기능을 추가해보았다. 검색기능은 이전부터 꼭 학습하고 싶은 영역이었는데 이번 기회에 구현할 수 있게 되었다. 검색 키워드와 저장 키워드가 일치하는 경우에는 키워드를 포함하는 요소의 부모요소(즉 개별 메모 컨테이너)를 삭제할 수 있게끔 구현했다.

function filter() {
  let searchValue = searchInput.value.toLowerCase(); // 대소문자를 구분하지 않는 검색을 위해 소문자 변환
  let notes = document.querySelectorAll('.inputDiv');

  for (let i = 0; i < notes.length; i++) {
    if (notes[i].innerHTML.toLowerCase().includes(searchValue)) {
      // 대소문자를 구분하지 않는 검색을 위해 소문자 변환
      notes[i].parentElement.style.display = 'flex';
    } else {
      notes[i].parentElement.style.display = 'none';
    }
  }
}
let searchInput = document.querySelector('.searchBox');
searchInput.addEventListener('input', filter);

[배운점]

1. addEventListner의 호출과 호출 위치

• 처음에 addEventListener를 사용하지 않고 함수 바깥에서 filter( ) 함수를 실행하는 식으로 코드를 작성했다;
  • 이렇게 되면 파일이 로드될 때 filter( ) 함수를 한 번만 호출하게 된다. 일반적으로는 검색 입력값이 변경될 때마다 filter 함수를 트리거하려고 하려면 함수실행문이 아닌 addEventListener 를 활용해서 구현하는 것이 적절하다.
• 그 다음에는 addEventListener 를 함수안에서 실행하는 기초적인 과오를 범했다;
  • 만약 filter 함수 내에서 addEventListener를 사용하여 이벤트 리스너를 추가하면, filter 함수가 호출될 때마다 새로운 이벤트 리스너가 계속 추가된다. 즉, 사용자가 입력 상자에 문자를 입력할 때마다 filter 함수가 여러 번 호출되게 되며, 이런 방식은 무한 루프를 일으킬 위험이 있다.

2. includes() 메소드의 사용

if (notes[i].innerHTML.toLowerCase().includes(searchValue)) {
	notes[i].parentElement.style.display = 'flex';
} else {
      notes[i].parentElement.style.display = 'none';
    }

 

검색기능 구현을 위해 꼭 익혀야 하는 메소드 이다.  indexOf 메소드도 있지만 includes 가 더 간편해 includes로 구현했다.

includes( )의 괄호안에는 찾고자하는 대조값이 들어간다.

 

3. style.display = "none"

특정 조건에 따라 특정 UI 가 보이거나 보이지 않게끔 하는데 유용한 방법이다.

style.display: flex 로 작성했더니 오류로 인해 작동하지 않았다. ""를 이용하도록 유의해야겠다.