[javascript] Fuse.js를 이용한 도시 검색 기능 구현 방법

01 Dec 2023

javascript

도시 검색 기능은 웹 애플리케이션에서 많이 사용되는 기능 중 하나입니다. 사용자가 도시의 이름으로 검색하면 해당 도시를 신속하게 찾을 수 있습니다. 이번 글에서는 Fuse.js 라이브러리를 사용하여 도시 검색 기능을 구현하는 방법에 대해 알아보겠습니다.

Fuse.js란?

Fuse.js는 클라이언트 측의 텍스트 검색을 쉽게 처리할 수 있는 JavaScript 라이브러리입니다. 전체 텍스트 데이터에서 사용자가 입력한 검색어와 일치하는 항목을 찾을 수 있습니다. Fuse.js는 검색 옵션의 설정을 통해 검색 결과의 정확도를 조정할 수 있습니다.

도시 데이터 정의

먼저, 도시 데이터의 배열을 정의해야 합니다. 각 도시는 이름과 국가 정보를 포함하는 객체로 구성됩니다. 예를 들어 다음과 같이 도시 데이터를 정의할 수 있습니다.

const cities = [
  { name: '서울', country: '대한민국' },
  { name: '도쿄', country: '일본' },
  { name: '뉴욕', country: '미국' },
  // ... 다른 도시 데이터
];

Fuse.js 사용하여 도시 검색 기능 구현하기

Fuse.js 라이브러리를 프로젝트에 추가합니다.

<script src="fuse.js"></script>

Fuse 객체를 생성하고 도시 데이터 배열과 검색 옵션을 설정합니다.

const options = {
  keys: ['name'], // 검색에 사용될 속성
};
const fuse = new Fuse(cities, options);

사용자의 검색어를 입력받고 Fuse 객체를 사용하여 검색을 수행합니다.

const searchInput = document.getElementById('searchInput');
searchInput.addEventListener('input', function() {
  const inputValue = this.value;
  const result = fuse.search(inputValue);
  // 검색 결과를 처리하는 로직 추가
});

검색 결과를 처리하는 로직을 구현합니다. 검색 결과는 배열로 반환되며, 각 결과는 원본 도시 데이터의 인덱스와 매치된 정확도를 포함합니다.

result.forEach(function(item) {
  const city = cities[item.refIndex];
  console.log(city.name, city.country, item.score);
});

결론

Fuse.js를 사용하면 도시 검색 기능을 손쉽게 구현할 수 있습니다. Fuse.js는 다양한 검색 옵션을 제공하여 원하는 검색 결과를 얻을 수 있도록 도와줍니다. 도시 검색 기능을 필요로 하는 웹 애플리케이션을 개발할 때 Fuse.js를 고려해보세요.

References

Fuse.js Documentation: https://fusejs.io/