이번 예제에서는 JavaScript의 Fuse.js 라이브러리를 사용하여 다중 검색 필터링 기능을 구현하는 방법을 알아보겠습니다. Fuse.js는 텍스트 검색을 위한 강력한 라이브러리로, 주어진 텍스트와 일치하는 항목을 찾아주는 기능을 제공합니다.

필요한 패키지 설치하기

먼저, Fuse.js를 사용하기 위해 필요한 패키지를 설치해야 합니다. 아래의 명령어를 사용하여 Fuse.js를 설치해주세요.

npm install fuse.js

예제 코드

아래의 예제 코드는 Fuse.js를 사용하여 다중 검색 필터링을 구현하는 예제입니다.

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

// 검색할 데이터 배열
const data = [
  { name: 'John Doe', age: 30, city: 'New York' },
  { name: 'Jane Smith', age: 25, city: 'London' },
  { name: 'Mark Johnson', age: 35, city: 'Paris' },
  { name: 'Emily Davis', age: 28, city: 'Berlin' },
];

// Fuse 인스턴스 생성
const fuse = new Fuse(data, {
  keys: ['name', 'age', 'city'], // 검색할 속성 지정
});

// 검색어
const query = 'John 30';

// 검색 수행
const result = fuse.search(query);

// 검색 결과 출력
console.log(result);

위의 코드는 이름, 나이, 도시 정보를 가진 객체 배열에서 지정한 검색어를 사용하여 검색을 수행합니다. 검색어는 공백으로 구분된 값을 입력하며, 검색어에서 일치하는 결과를 반환합니다.

결과

위의 예제 코드를 실행하면 다음과 같은 검색 결과를 출력할 수 있습니다.

[
  {
    item: { name: 'John Doe', age: 30, city: 'New York' },
    refIndex: 0
  }
]

위의 결과에서 item 속성은 일치하는 항목을 나타내고, refIndex 속성은 항목의 인덱스를 나타냅니다.

결론

Fuse.js는 간단하게 다중 검색 필터링 기능을 구현할 수 있는 강력한 라이브러리입니다. 이 예제를 통해 Fuse.js를 사용하여 원하는 데이터에서 원하는 결과를 쉽게 찾을 수 있습니다.

참고 자료

• Fuse.js 공식 문서: https://fusejs.io/