Fuse.js는 자바스크립트에서 사용할 수 있는 간단하면서도 강력한 텍스트 검색 라이브러리입니다. 이 라이브러리를 이용하면 웹 애플리케이션에서 실시간 검색 기능을 구현하는 것이 아주 간편해집니다. 이제 Fuse.js를 이용한 실시간 검색 기능을 구현하는 방법을 알아보겠습니다.

1. Fuse.js 설치

Fuse.js를 프로젝트에 설치하기 위해서는 npm을 사용하면 됩니다. 다음 명령어를 사용하여 Fuse.js를 설치합니다.

npm install fuse.js

2. Fuse.js 초기화

Fuse.js를 사용하기 위해 먼저 Fuse 객체를 생성해야 합니다. Fuse 객체를 생성할 때는 검색할 데이터와 검색 옵션을 전달해야 합니다. 다음은 Fuse 객체를 초기화하는 예제 코드입니다.

const dataset = [
  { id: 1, title: "Apple iPhone 12", price: 999 },
  { id: 2, title: "Samsung Galaxy S21", price: 899 },
  { id: 3, title: "Google Pixel 5", price: 699 },
  // 데이터는 자신의 프로젝트에 맞게 변경해주세요.
];

const options = {
  keys: ["title"],
  threshold: 0.3,
};

const fuse = new Fuse(dataset, options);

위 코드에서 dataset은 Fuse.js가 검색할 데이터를 담고 있는 배열입니다. options 객체는 검색 옵션을 설정하는 부분으로, keys 프로퍼티에는 검색할 필드를 지정하고 threshold 프로퍼티에는 검색 결과의 유사도 임계값을 설정합니다.

3. 검색 기능 구현

이제 Fuse 객체를 초기화했으므로 실시간 검색 기능을 구현할 수 있습니다. 예를 들어, 사용자가 입력한 검색어를 사용하여 데이터를 검색하고 결과를 화면에 표시하는 기능을 구현해보겠습니다. 아래 코드는 검색어 입력 필드와 검색 결과를 표시할 영역이 있는 HTML과 자바스크립트 코드입니다.

<input type="text" id="search-input" placeholder="검색어를 입력하세요">
<div id="search-results"></div>

<script>
const searchInput = document.getElementById("search-input");
const searchResults = document.getElementById("search-results");

searchInput.addEventListener("input", (event) => {
  const searchText = event.target.value;
  
  const results = fuse.search(searchText);
  
  let html = "";
  results.forEach((result) => {
    const { title } = result.item;
    html += `<div>${title}</div>`;
  });
  
  searchResults.innerHTML = html;
});
</script>

위 코드에서 search-input은 검색어를 입력할 필드를 나타내며, search-results는 검색 결과를 표시할 영역입니다. 검색어 입력 필드에 입력이 발생할 때마다 input 이벤트가 발생하며, 이 때 Fuse 객체의 search 메서드를 사용하여 검색을 수행합니다. 검색 결과는 배열로 반환되며, 각 결과를 반복문을 통해 HTML로 만들어 search-results 영역에 표시합니다.

4. 실행 및 테스트

위 코드를 프로젝트에 적용하고 웹 애플리케이션을 실행하면, 사용자가 검색어를 입력할 때마다 실시간으로 검색 결과가 보여집니다. Fuse.js는 더 효율적인 검색을 위해 많은 기능을 제공하므로, 필요에 따라 설정을 변경하고 커스터마이징할 수도 있습니다.

참고 자료

• Fuse.js 공식 문서