Cara membuat local search dengan Fuse.js

Pencarian lokal dengan pendekatan client-side, sampai kapanpun akan selalu lebih cepat dari pencarian yang menggunakan server-side, karena metode pencarian ada di sisi pengguna di browser mereka, bukan diakses dari server yang dipengaruhi latensi, koneksi internet dan lainnya.

Untuk menggunakan pendekatan ini, kita dapat menggunakan library yang populer untuk fitur ini, yaitu Fuse.js.

Fuse.js, library kecil penyelamat UX

Definisi singkat

Fuse.js adalah lightweight fuzzy-search library untuk JavaScript yang dapat berjalan sepenuhnya di sisi klien tanpa server. Fuse.js tidak memerlukan backend, cepat untuk dataset kecil-menengah (≤ 5–10k item), mendukung pencarian fuzzy, weighted keys, threshold, dan advanced scoring.

Fungsi utama Fuse.js adalah membantu pengguna menemukan informasi meskipun terdapat kesalahan ketik, ejaan yang tidak tepat, atau pencarian parsial, dengan mencocokkan string yang kira-kira sama dengan pola yang diberikan, bukan pencocokan kata kunci yang persis sama.

Implementasi di Astro

Sebelum mengimplementasikan Fuse.js, ada dua cara instalasi yang dapat kita gunakan, yaitu:

• Melalui CDN, <script src="[https://cdn.jsdelivr.net/npm/fuse.js/dist/fuse.min.js"></script>
• Melalui NPM, npm install fuse.js

Tahap ini penting, supaya Astro mengenali bahwa Fuse.js telah tersedia baik melalui NPM maupun CDN.

Setelah semuanya siap, kita buat API internal untuk menginisialisasi dan menyiapkan dataset.

// src/pages/search-dataset.json.ts

import { getCollection, type CollectionEntry } from 'astro:content';
import type { APIRoute } from 'astro';

// Tipe data untuk item yang akan di indeks (sesuaikan property)
interface IndexItem {
  url: string;
  title: string;
  description: string;
  author?: string;
}

const COLLECTIONS: Record<string, (slug: string) => string> = {
  posts: (slug) => `/${slug}/`,
  authors: (slug) => `/penulis/${slug}/`,
  pages: (slug) => `/${slug}/`,
};

// Petakan item ke format yang diinginkan
const normalized = publishedItems.map((p): IndexItem => ({
    url: buildUrl(p.slug),
    title: p.data.title || p.data.name || '',
    description: p.data.description || p.data.bio || '',
    author: p.data.author,
}));

Pada tutorial ini, kita akan menggunakan metode CDN. Kita inisialisasi Fuse.js di src/layout/BaseLayout.astro atau di layout utama manapun, misal src/layout/Layout.astro.

<script type="module">
   import Fuse from "https://cdn.jsdelivr.net/npm/fuse.js@6.6.2/dist/fuse.esm.min.js";
      
   async function initLocalSearch() {
      const input = document.getElementById("localsearch-input");
      const resultsList = document.getElementById("localsearch-results");
      if (!input || !resultsList) return;
            
     // kode lainnya //
      
   })
  }
}

Hasil

Selanjutnya kita coba di antarmuka pencarian, apakah berfungsi dengan baik atau tidak. Kita coba cari kueri biznet di kotak pencarian.

Ketika hasil pencarian di klik, layar akan menampilkan tautan artikel yang ada di kotak pencarian.

Setelah local search berfungsi dengan baik, kita cek hasil render dataset dari konten di situs kita. Kunjungi /search-dataset.json, misal http://localhost:4321/search-dataset.json hasilnya akan seperti ini:

// search-dataset.json

[  
  {
    "url": "/test-local-search-fusejs/",
    "title": "Test Local Search dengan Fuse.js",
    "description": "Implementasi Fuse.js di local search"
  },
  {
    "url": "/platform-edukasi-pembelajaran-maucariapacom/",
    "title": "Platform edukasi dan pembelajaran, MauCariApa.com",
    "description": "Your journey start here."
  },
]

Epilog

Dengan menerapkan fitur pencarian lokal, kita telah mengeleminasi 99% masalah UX, yang dipengaruhi banyak faktor seperti jaringan atau server kita. Dengan demikian, pembaca menjadi sangat nyaman karena pencarian konten jadi lebih mudah dan cepat. Tetapi, fitur pencarian lokal juga harus disiapkan dengan hati-hati, karena sedikit kesalahan dapat memicu masalah, diantaranya para pencuri konten (scraper) yang merayapi file .json tersebut.