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:
Copy <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:
