Membuat Fitur Pencarian Sederhana di Svelte

Svelte punya fitur reactivity yang bikin update data jadi otomatis tanpa boilerplate.
Dalam artikel ini kita akan membuat pencarian produk sederhana: ketika user mengetik di input, hasil pencarian langsung muncul di bawahnya.

1. Kode Lengkap

Buat file src/routes/+page.svelte:

<script lang="ts">
  let query = "";
  let products = ["Laptop", "Mouse", "Keyboard", "Monitor", "Printer"];
  let results: string[] = [];

  function searchProducts(q: string) {
    if (q.trim() === "") {
      results = [];
    } else {
      results = products.filter((p) =>
        p.toLowerCase().includes(q.toLowerCase())
      );
    }
  }

  // Reactive statement: jalan otomatis tiap kali query berubah
  $: searchProducts(query);
</script>

<input bind:value={query} placeholder="Cari produk..." />

<ul>
  {#if query.trim() !== ""}
    {#if results.length > 0}
      {#each results as item}
        <li>{item}</li>
      {/each}
    {:else}
      <li>Tidak ada hasil</li>
    {/if}
  {/if}
</ul>

2. Penjelasan

Beberapa bagian penting:

• State

  Copy

  let query = "";
  let products = ["Laptop", "Mouse", "Keyboard", "Monitor", "Printer"];
  let results: string[] = [];

  query menyimpan teks pencarian, products adalah data statis, dan results hasil filter.

• Fungsi pencarian

  Copy

  function searchProducts(q: string) {
    if (q.trim() === "") {
      results = [];
    } else {
      results = products.filter((p) =>
        p.toLowerCase().includes(q.toLowerCase())
      );
    }
  }

  Jika input kosong → hasil di-reset. Jika ada → filter produk berdasarkan query.

• Reactive statement ($:)

  Copy

  $: searchProducts(query);

  Setiap kali query berubah, fungsi searchProducts otomatis dijalankan. Tidak perlu useEffect atau event listener manual.

• Template

  Copy

  <input bind:value={query} placeholder="Cari produk..." />

  Binding langsung antara input dan variabel query.

  Copy

  {#if results.length > 0}
    {#each results as item}
      <li>{item}</li>
    {/each}
  {:else}
    <li>Tidak ada hasil</li>
  {/if}

  Menampilkan daftar produk yang cocok, atau pesan fallback jika tidak ada.

3. Hasil

1. Ketik lap → hasil menampilkan Laptop.
2. Ketik mo → hasil menampilkan Mouse dan Monitor.
3. Ketik teks yang tidak cocok → muncul pesan Tidak ada hasil.
4. Kosongkan input → hasil pencarian hilang.

Kesimpulan

Dengan reactive statement di Svelte, membuat fitur seperti pencarian jadi super sederhana:

• Tidak perlu manual pasang event listener.
• Tidak perlu state management rumit.
• Data di UI otomatis sinkron dengan variabel.

Konsep yang sama bisa dipakai untuk live search dari API, filter tabel, atau bahkan autocomplete.