[javascript] SlickGrid의 통합 검색 기능

01 Dec 2023

javascript

SlickGrid은 웹 기반 그리드 컴포넌트로서, 대용량 데이터를 효율적으로 표시하고 필터링 할 수 있는 강력한 기능을 제공합니다. 하지만 기본적으로는 각 열마다 별도의 검색 기능을 제공하고 있어, 데이터 검색에 불편함을 느낄 수 있습니다.

이번 포스트에서는 SlickGrid에 통합된 검색 기능을 구현하는 방법을 알아보겠습니다. 이는 사용자가 한 곳에서 전체 데이터를 검색할 수 있는 기능을 제공하며, 사용자 친화적인 검색 경험을 제공합니다.

1. 통합 검색 필드 추가

먼저, SlickGrid에 통합 검색을 위한 추가적인 필드를 생성해야 합니다. 이 필드는 사용자가 검색어를 입력할 수 있는 입력란으로 사용됩니다. 예를 들어, 다음과 같은 HTML 코드를 통해 검색 필드를 추가할 수 있습니다:

<input type="text" id="searchField" placeholder="Search">

2. 데이터 필터링

생성한 검색 필드에 입력된 검색어를 기준으로 데이터를 필터링해야 합니다. 이를 위해 SlickGrid의 dataView.setFilter() 메서드를 사용할 수 있습니다. 데이터 필터링은 다음과 같은 단계로 이루어집니다:

검색 필드에 입력된 검색어를 가져옵니다.
데이터를 필터링해야 하는 열을 지정합니다.
데이터를 검색어와 일치하는지 확인하는 필터 함수를 작성합니다.
dataView.setFilter() 메서드에 필터 함수를 전달하여 데이터를 필터링합니다.

다음은 위 단계를 바탕으로 구현한 예시 코드입니다:

var searchString = '';

function applySearch() {
  var searchInput = document.getElementById('searchField');
  searchString = searchInput.value.toLowerCase();
  dataView.setFilter(searchData);
  grid.invalidate();
}

function searchData(item) {
  if (searchString === '') {
    return true;
  }

  for (var property in item) {
    if (item.hasOwnProperty(property) && typeof item[property] === 'string') {
      if (item[property].toLowerCase().indexOf(searchString) !== -1) {
        return true;
      }
    }
  }

  return false;
}

document.getElementById('searchField').addEventListener('input', applySearch);

이 코드는 searchField에 입력된 검색어를 기준으로 데이터를 필터링하고, 그리드를 업데이트합니다. searchData 함수는 각 데이터 항목의 열을 반복하여 검색어와 일치하는지 확인하고, 일치하는 경우 true를 반환합니다.

3. 동적 검색

위 예시 코드에서는 검색 필드에 입력할 때마다 즉시 검색이 실행되지만, 만약 실시간으로 검색을 수행하고 싶다면, input 이벤트 대신 keyup 이벤트를 사용할 수도 있습니다. 이를 통해 사용자가 입력할 때마다 실시간으로 검색 결과를 갱신할 수 있습니다.

document.getElementById('searchField').addEventListener('keyup', applySearch);

결론

SlickGrid에 통합 검색 기능을 추가하는 방법을 알아보았습니다. 검색 필드를 추가하고, 데이터를 필터링하여 일치하는 항목을 찾을 수 있습니다. 이를 통해 사용자는 한 곳에서 간편하게 원하는 데이터를 검색할 수 있게 됩니다. 이 방법을 사용하여 사용자 친화적인 검색 경험을 제공할 수 있습니다.

참고자료:

SlickGrid - https://github.com/mleibman/SlickGrid