Fuse.js는 JavaScript에서 제공되는 강력한 검색 라이브러리입니다. 이 라이브러리를 사용하면 효율적인 검색을 구현할 수 있습니다. 이번 블로그 포스트에서는 Fuse.js를 사용하여 검색 결과에 하이라이팅을 적용하는 방법을 알아보겠습니다.

1. Fuse.js 설치 및 초기화

Fuse.js를 사용하기 위해서는 먼저 Fuse.js 라이브러리를 설치해야 합니다. npm을 사용하여 설치할 수 있습니다.

npm install fuse.js

설치가 완료되면, Fuse.js를 초기화합니다. 다음과 같은 코드를 작성하여 Fuse.js를 초기화합니다.

const Fuse = require('fuse.js');

const options = {
  // 모든 설정 옵션은 Fuse.js 문서에서 확인할 수 있습니다.
};

const fuse = new Fuse(data, options);

2. 검색어로 결과 필터링

Fuse.js는 지정한 데이터에 대해 검색을 수행하여 결과를 반환합니다. 검색어를 입력받아 Fuse.js를 사용하여 결과를 필터링할 수 있습니다. 다음은 검색어로 결과를 필터링하는 코드의 예입니다.

const searchString = 'example';
const filteredResults = fuse.search(searchString);

이제 filteredResults 변수에는 검색어에 해당하는 결과가 저장됩니다.

3. 검색 결과 하이라이팅

검색 결과에 하이라이팅을 적용하기 위해서는 결과의 일치하는 부분을 표시해야 합니다. Fuse.js는 검색 결과에서 일치하는 부분을 강조하기 위한 matches 속성을 제공합니다. 이 속성을 사용하여 검색 결과를 반복하면서 하이라이팅을 적용할 수 있습니다.

const highlightedResults = filteredResults.map((result) => {
  const { item, matches } = result;
  const highlightedItem = { ...item };

  matches.forEach((match) => {
    const { indices } = match;

    indices.forEach(([start, end]) => {
      highlightedItem.name = `${highlightedItem.name.slice(0, start)}<mark>${highlightedItem.name.slice(start, end + 1)}</mark>${highlightedItem.name.slice(end + 1)}`;
    });
  });

  return highlightedItem;
});

위의 코드에서는 name 속성을 예시로 하이라이팅을 적용하였습니다. 하이라이팅을 적용하려는 부분을 다른 속성으로 변경하면 됩니다.

4. 결과 출력

마지막으로, 하이라이팅이 적용된 검색 결과를 출력할 수 있습니다. HTML에서는 <mark> 태그를 사용하여 텍스트를 강조할 수 있습니다.

highlightedResults.forEach((result) => {
  const resultElement = document.createElement('div');
  resultElement.innerHTML = result.name; // 하이라이팅이 적용된 속성을 출력

  document.body.appendChild(resultElement);
});

위의 코드는 각각의 검색 결과를 임의의 div 요소에 추가합니다. 필요에 따라 결과를 다른 방식으로 출력할 수 있습니다.

이제 Fuse.js를 사용하여 검색 결과에 하이라이팅을 적용하는 방법을 알게 되었습니다. Fuse.js의 다양한 설정 옵션을 사용하여 검색의 정확도와 성능을 더욱 개선할 수 있습니다. Fuse.js 문서에서 더 자세한 내용을 참고하시기 바랍니다.

참고 자료

• Fuse.js 공식 문서