[vue.js] debounce를 이용한 검색기능 구현

검색기능

위 그림과 같이 보는대로 검색에 따른 내용물이 보이는 기능을 구현하려할때, 자바스크립트에서 디바운싱 기능을 이용하면 수월하게 작업할 수 있다.

debounce 란?

특정시간이 지난 시점에서 이벤트가 하나만 발생하도록 제어하는 기술

연속적으로 호출되는 함수들 중 마지막 함수 또는 제일 처음만 호출하도록 하는 것

검색창 input에 search라는 data를 바인딩 시킨 후 

 <input class="stage-search" type="text" 
              v-model="search" 
              placeholder="스테이지 검색" 
              @input="handleSearchInput"
              @keydown.tab="KeydownTab"
              />

input 이벤트를 작성한다.

 handleSearchInput(e) {
      this.search = e.target.value;
      
      if(this.search.length !== 0){
        clearTimeout(this.debounce);
        this.debounce = setTimeout(() => {
          const filteredList = this.stageInfoList.filter(item => item.title.includes(this.search));
          this.searchList = filteredList;
        }, 500);

	  }else{
        clearTimeout(this.debounce);
        this.debounce = setTimeout(() => {
          this.searchList = [];
        }, 500);
      }
    },

위에 필터링 되는 함수를 searchList라는 data값에 넣어서 html에서 랜더링 시켜주면 끝.