[javascript] Fuse.js를 이용한 자동완성 기능 구현 방법

01 Dec 2023

javascript

Fuse.js는 자바스크립트에서 사용할 수 있는 경량화된 검색 라이브러리입니다. 이 라이브러리를 활용하면 웹 애플리케이션에 자동완성 기능을 쉽고 빠르게 구현할 수 있습니다.

이 글에서는 Fuse.js를 이용하여 자동완성 기능을 구현하는 방법을 다루겠습니다.

Fuse.js 설치

먼저 Fuse.js를 설치해야 합니다. 이를 위해 npm(Node Package Manager)을 이용하여 설치합니다.

npm install fuse.js

Fuse.js 설정

Fuse.js를 사용하기 위해 먼저 Fuse 객체를 생성해야 합니다. 아래 코드를 통해 Fuse 객체를 생성할 수 있습니다.

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

const options = {
  keys: ['name'] // 검색할 키 값 설정
};

const fuse = new Fuse(data, options); // 데이터와 옵션을 사용하여 Fuse 객체 생성

위 코드에서 data는 자동완성 대상이 될 배열이며, options는 검색 기준을 설정하는 옵션 객체입니다. keys 속성에는 검색할 대상의 속성이나 키 값을 배열로 지정할 수 있습니다.

자동완성 기능 구현

Fuse 객체를 생성한 후에는 입력된 텍스트에 대한 자동완성 기능을 구현할 수 있습니다. 이를 위해 입력 받는 이벤트 리스너를 등록하고 Fuse 객체의 search 메소드를 사용하여 자동완성 결과를 얻습니다.

const input = document.getElementById('search-input');

input.addEventListener('input', function() {
  const query = input.value;
  const results = fuse.search(query);

  // 자동완성 결과 처리
  // ...
});

위 코드에서 search-input은 검색 입력을 받을 input 요소를 의미합니다. input 요소에 input 이벤트 리스너를 등록하여 입력이 변경될 때마다 자동완성 결과를 얻는 것이 가능합니다.

fuse.search(query) 메소드는 입력된 쿼리를 기반으로 자동완성 결과를 반환해줍니다. 이 결과를 활용하여 자동완성 결과를 처리하는 로직을 구현하면 됩니다.

예제

다음은 Fuse.js를 이용한 자동완성 기능의 간단한 예제입니다. 검색할 데이터를 배열로 정의하고 Fuse 객체를 생성한 후 입력과 관련된 이벤트를 처리하여 자동완성 결과를 출력합니다.

<html>
<head>
  <script src="fuse.js"></script>
  <script>
    const data = [
      { name: 'Apple' },
      { name: 'Banana' },
      { name: 'Orange' },
      { name: 'Grapes' },
      { name: 'Pineapple' }
    ];

    const options = {
      keys: ['name']
    };

    const fuse = new Fuse(data, options);

    function handleInput() {
      const input = document.getElementById('search-input');
      const query = input.value;
      const results = fuse.search(query);

      const suggestions = document.getElementById('suggestions');
      suggestions.innerHTML = '';

      for (let i = 0; i < results.length; i++) {
        const suggestion = document.createElement('div');
        suggestion.innerHTML = results[i].item.name;
        suggestions.appendChild(suggestion);
      }
    }
  </script>
</head>
<body>
  <input id="search-input" type="text" oninput="handleInput()" autocomplete="off">
  <div id="suggestions"></div>
</body>
</html>

위 예제를 실행하면 search-input 요소에 입력을 하면 자동완성 결과가 suggestions 요소에 표시됩니다.

결론

Fuse.js를 이용하여 자동완성 기능을 구현하는 방법에 대해 알아보았습니다. Fuse.js 의 간편한 설정과 검색 기능을 활용하면 사용자에게 편리한 자동완성 경험을 제공할 수 있습니다. Fuse.js의 자세한 사용법과 옵션에 대해서는 공식 문서를 참고하시기 바랍니다.