[javascript] Fuse.js를 이용한 사용자 정의 검색 기능 구현 방법

01 Dec 2023

javascript

Fuse.js는 자바스크립트에서 텍스트 검색을 위한 라이브러리로, 사용자 정의 검색 기능을 간단하게 구현할 수 있게 도와줍니다. 이번 블로그 포스트에서는 Fuse.js를 사용하여 사용자 정의 검색 기능을 구현하는 방법에 대해 알아보겠습니다.

Fuse.js란?

Fuse.js는 텍스트 검색을 위한 자바스크립트 라이브러리로, 일치하는 검색어를 찾거나 가장 유사한 결과를 찾아주는 기능을 제공합니다. Fuse.js는 다양한 매개변수를 설정하여 검색 알고리즘을 조정할 수 있으며, 검색 결과를 정렬하고 필터링하는 기능도 제공합니다.

사용자 정의 검색 기능 구현하기

Fuse.js를 사용하여 사용자 정의 검색 기능을 구현하는 방법은 다음과 같습니다:

Fuse.js 라이브러리를 다운로드하고 프로젝트에 추가합니다.
검색 대상이 되는 데이터를 생성하고, Fuse.js에서 요구하는 형식으로 변환합니다. 가능한 경우 데이터를 사전 처리하여 정확한 검색 결과를 얻을 수 있도록 합니다.
Fuse.js를 초기화하고 검색 옵션을 설정합니다. 이 단계에서는 검색어와 일치하는 결과를 찾을 방법에 대한 설정을 할 수 있습니다. 검색어의 일부만 일치시켜도 결과를 찾을 수 있도록 하거나, 인덱스의 가중치를 설정하여 특정 필드에서의 일치 결과를 우선적으로 찾을 수 있도록 할 수 있습니다.
검색 기능을 트리거하는 이벤트 리스너를 추가합니다. 예를 들어, 사용자가 검색어를 입력하거나 검색 버튼을 클릭했을 때 검색을 수행하는 이벤트 리스너를 추가할 수 있습니다.
검색 결과를 처리하고 표시하는 로직을 구현합니다. Fuse.js를 사용하면 검색 결과를 정렬하거나 필터링하는 기능을 사용할 수 있습니다. 검색 결과를 적절한 방식으로 표시하여 사용자에게 보여줍니다.

예시 코드

// 검색 대상 데이터 생성
const data = [
  { title: 'Apple', category: 'Fruit' },
  { title: 'Banana', category: 'Fruit' },
  { title: 'Carrot', category: 'Vegetable' },
  { title: 'Desk', category: 'Furniture' },
];

// Fuse.js 초기화 및 검색 옵션 설정
const options = {
  keys: ['title', 'category'],
};
const fuse = new Fuse(data, options);

// 검색 기능 트리거 이벤트 리스너 추가
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', () => {
  const keyword = searchInput.value;
  const result = fuse.search(keyword);
  
  // 검색 결과 처리 및 표시 로직 구현
  // 예: 검색 결과를 리스트로 표시하기
  const resultList = document.getElementById('result');
  resultList.innerHTML = '';
  result.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item.title;
    resultList.appendChild(li);
  });
});

위의 예시 코드는 Fuse.js를 사용하여 검색 기능을 구현하는 간단한 예제입니다. 데이터는 title과 category 필드를 가지고 있으며, 검색어와 일치하는 결과를 찾을 때 이 두 필드를 사용합니다. 검색 기능은 search 이벤트가 발생할 때마다 실행되며, 검색 결과를 리스트로 표시합니다.

Fuse.js란?

사용자 정의 검색 기능 구현하기

예시 코드

참고 자료