[javascript] Fuse.js를 이용한 지역 검색 기능 구현 방법
지역 검색 기능은 웹 애플리케이션에서 특정 지역을 검색하여 관련된 결과를 보여주는 기능입니다. Fuse.js는 JavaScript에서 사용할 수 있는 유명한 문자열 검색 라이브러리로써, 이를 이용하여 강력한 지역 검색 기능을 구현할 수 있습니다.
Fuse.js 설치하기
먼저, Fuse.js를 사용하기 위해 라이브러리를 설치해야 합니다. 다음 명령어를 사용하여 npm을 통해 Fuse.js를 설치할 수 있습니다.
npm install fuse.js
Fuse.js를 이용한 지역 검색 기능 구현하기
Fuse.js를 사용하여 지역 검색 기능을 구현하기 위해 다음과 같은 단계를 따를 수 있습니다.
- Fuse.js 라이브러리를 import 합니다.
import Fuse from 'fuse.js';
- Fuse 객체를 생성하고 검색할 데이터와 설정을 전달합니다.
const searchData = [
{ name: 'Seoul', country: 'South Korea' },
{ name: 'Tokyo', country: 'Japan' },
{ name: 'New York', country: 'United States' },
// 검색할 지역 데이터
];
const fuseOptions = {
keys: ['name'],
threshold: 0.3,
};
// 검색 옵션 설정
const fuse = new Fuse(searchData, fuseOptions);
- 검색어를 입력받고 Fuse 객체를 이용하여 검색을 수행합니다.
const searchQuery = 'Seoul';
const searchResults = fuse.search(searchQuery);
// 검색 결과 가져오기
console.log(searchResults);
위의 코드에서 fuse.search() 메서드를 사용하여 검색어에 대한 결과를 가져올 수 있습니다. 검색 결과는 정확도를 기준으로 정렬되어 반환됩니다.
검색 결과 활용하기
Fuse.js를 이용하여 가져온 검색 결과를 활용하여 원하는 방식으로 표시할 수 있습니다. 예를 들어, 검색 결과를 리스트 형태로 보여주는 경우 다음과 같은 코드를 사용할 수 있습니다.
const searchResults = fuse.search(searchQuery);
const resultList = document.querySelector('#search-result');
resultList.innerHTML = '';
searchResults.forEach((result) => {
const listItem = document.createElement('li');
listItem.innerText = `${result.item.name}, ${result.item.country}`;
resultList.appendChild(listItem);
});
위 코드는 검색 결과를 <ul> 요소에 동적으로 추가하여 보여주는 예시입니다. 화면에 표시하는 방식은 상황에 따라 다르게 구현할 수 있습니다.