Cara Menambahkan Pencarian ke Aplikasi Kamu: Dari Filter Sederhana hingga Full-Text Search
Untuk menambahkan pencarian ke aplikasi, mulailah dengan hal paling sederhana yang berhasil: kotak pencarian yang memanggil rute server, yang memfilter baris database dengan mencocokkan kueri pada beberapa kolom, ditambah filter untuk hal seperti kategori atau harga. Jika itu belum cukup — kamu membutuhkan pemeringkatan relevansi, stemming kata, atau banyak data — beralih ke full-text search database kamu, dan baru pindah ke mesin pencari yang dihosting jika kamu membutuhkan toleransi typo yang kuat atau hasil instan di data yang sangat besar. Apa pun pilihanmu, pencarian harus menghormati izin: pengguna tidak boleh menemukan data yang tidak boleh mereka lihat.
Apa arti "pencarian" untuk aplikasimu
Pencarian mencakup beberapa hal berbeda, dan sebagian besar aplikasi membutuhkan lebih dari satu:
- Pencarian kata kunci: kotak teks — "temukan listing yang menyebut 'taman'".
- Filter: pilihan terstruktur — kategori, kota, rentang harga, tanggal, status.
- Pengurutan: terbaru, termurah, paling relevan.
- Pelengkapan otomatis: saran saat mengetik.
- Toleransi typo: "restuarant" tetap menemukan "restaurant".
Untuk direktori, job board, atau toko, filter sering kali lebih penting daripada kotak teks. Tentukan mana yang benar-benar kamu butuhkan sebelum memilih alat.
Pilihanmu
| Pendekatan | Cara kerja | Cocok untuk | Batasan |
|---|---|---|---|
| Filter di browser | Muat daftar, filter dengan JavaScript | Daftar publik kecil (beberapa ratus item) | Mengirim semua data ke setiap pengunjung; lambat dengan daftar besar |
| Pencocokan pola database | Kueri server seperti "nama mengandung teks", tidak sensitif huruf besar-kecil | Aplikasi kecil hingga menengah, alat admin | Tanpa pemeringkatan; bisa lambat di tabel besar; tanpa stemming |
| Full-text search database | Postgres mengindeks kata dan memberi peringkat pada hasil yang cocok | Sebagian besar aplikasi berkonten banyak | Lemah dengan typo kecuali kamu menambahkan pencocokan fuzzy |
| Pencocokan fuzzy (trigram) | Postgres membandingkan urutan karakter untuk kemiripan | Nama, kolom pendek, toleransi typo | Membutuhkan ekstensi dan indeks; penyetelan memerlukan perhatian |
| Mesin pencari yang dihosting | Layanan terpisah mengindeks datamu (Algolia, Meilisearch, Typesense, Elasticsearch, dan lainnya) | Katalog besar, pencarian instan, toleransi typo yang kuat | Layanan lain yang harus disinkronkan, dibayar, dan diamankan |
Jika datamu sudah berada di Postgres, full-text search bawaannya adalah jalan tengah yang kuat. Ia memecah teks menjadi kata, mengubahnya ke bentuk dasar (sehingga "running" cocok dengan "run"), mengabaikan kata umum, dan bisa memberi peringkat hasil berdasarkan seberapa cocok mereka. Dengan indeks yang tepat, ia tetap cepat di tabel besar.
Contoh prompt
Awal yang sederhana:
Tambahkan kotak pencarian dan filter ke halaman listing. Pencarian harus mencocokkan kueri dengan judul dan deskripsi, tidak sensitif huruf besar-kecil. Filter: kategori (dropdown), kota (dropdown), dan harga maksimum. Lakukan pencarian di server dengan rute API yang berpaginasi, 20 hasil per halaman. Simpan pencarian dan filter di URL agar hasil bisa dibagikan dan tombol kembali berfungsi. Tampilkan keadaan kosong yang ramah saat tidak ada yang cocok.
Meningkat ke full-text search:
Ganti pencarian listing dengan full-text search Postgres pada judul (dengan bobot lebih tinggi) dan deskripsi. Tambahkan indeks yang tepat, beri peringkat hasil berdasarkan relevansi, dan pertahankan filter dan paginasi yang ada. Jangan ubah data yang sudah ada.
Menambahkan toleransi typo untuk nama:
Tambahkan pencocokan fuzzy pada nama bisnis agar salah ketik kecil tetap menemukan hasil. Gunakan kemiripan trigram jika tersedia, dengan indeks, dan kembali ke pencarian yang ada jika tidak.
Langkah demi langkah
- Daftarkan apa yang dicari orang. Kolom mana (judul, deskripsi, tag, nama)? Filter mana? Tanyakan beberapa pengguna nyata jika kamu bisa.
- Mulai dari server. Tambahkan rute API yang menerima kueri dan filter, dan mengembalikan satu halaman hasil. Jangan memuat semuanya ke browser.
- Terapkan izin di kueri. Jika pengguna hanya melihat data mereka sendiri, atau hanya yang sudah dipublikasikan, kondisi itu harus berada di kueri pencarian yang sama.
- Tambahkan paginasi sejak awal — nomor halaman atau "muat lebih banyak".
- Simpan status pencarian di URL (misalnya
?q=taman&city=leeds). Tautan yang bisa dibagikan, tombol kembali yang berfungsi, dan mesin pencari bisa meng-crawl halaman yang difilter jika kamu menginginkannya. - Debounce pencarian saat mengetik. Tunggu beberapa ratus milidetik setelah berhenti mengetik sebelum melakukan kueri, sehingga kamu tidak mengirim permintaan untuk setiap ketukan tombol.
- Tambahkan indeks setelah kamu tahu kolom mana yang kamu filter dan cari.
- Tingkatkan ke full-text search, lalu pencocokan fuzzy, lalu mesin pencari yang dihosting — hanya saat langkah yang lebih sederhana gagal bagi pengguna nyata.
- Uji dengan data yang mirip nyata: ratusan atau ribuan baris, karakter aneh, kueri kosong, kueri yang sangat panjang, bahasa lain jika kamu mendukungnya.
Kesalahan yang sering terjadi
- Memuat seluruh tabel ke browser. Tidak masalah untuk 50 item, menyakitkan untuk 50.000, dan itu mengungkap setiap data — termasuk yang tidak boleh dilihat pengguna.
- Pencarian yang mengabaikan izin. Pencarian adalah celah kebocoran yang umum: data pribadi atau draf muncul karena kueri pencarian melupakan kondisi "hanya milik saya" atau "hanya yang dipublikasikan".
- Membangun SQL dari input pengguna mentah. Selalu gunakan kueri berparameter. Pembangun AI biasanya melakukannya, tetapi periksa jika kamu melihat string yang disambung langsung.
- Tidak ada keadaan kosong. "Tidak ada hasil" dengan saran (hapus filter, periksa ejaan) mencegah orang meninggalkan halaman.
- Tanpa indeks. Pencarian terasa baik-baik saja dengan data uji dan melambat seiring data nyata bertambah.
- Langsung melompat ke layanan pencarian. Kamu lalu harus menjaga salinan kedua datamu tetap sinkron, menangani penghapusan, dan mengamankan set key lain — sering kali tanpa keuntungan yang terlihat.
- Lupa ponsel. Filter harus muat di layar ponsel; laci filter atau panel yang bisa dilipat biasanya lebih baik daripada sidebar.
Checklist
- Kamu tahu kolom mana yang dicari dan filter apa yang ada
- Pencarian berjalan di server dan mengembalikan hasil berpaginasi
- Kueri menerapkan izin yang sama dengan bagian lain aplikasi
- Input pengguna diteruskan sebagai parameter, tidak pernah disambung ke SQL
- Status pencarian berada di URL
- Pengetikan di-debounce
- Kolom yang dicari dan difilter sudah diindeks
- Keadaan kosong, tanpa hasil, dan error jelas
- Diuji dengan volume data realistis dan input yang berantakan
Menambahkan pencarian dengan Mythex
Di aplikasi yang dibangun di atas Mythex, data biasanya berada di database Postgres milik proyek, jadi kamu bisa mulai dengan prompt di atas: pencocokan pola dulu, lalu full-text search Postgres saat kamu membutuhkan pemeringkatan. Jika kamu ingin mesin pencari yang dihosting, gunakan akun dan key milikmu sendiri, simpan sebagai secret proyek, dan minta agent untuk mengindeks dan menanyakannya dari server, seperti dijelaskan di Integrasikan API apa pun.
Pencarian adalah inti dari banyak aplikasi: lihat cara membangun situs direktori, cara membangun job board, dan cara membangun marketplace untuk melihat bagaimana pencarian masuk ke bagian lain dari produk.
Pertanyaan
Apa cara termudah untuk menambahkan pencarian ke aplikasi?
Jika datamu ada di database, rute server yang memfilter baris dengan pencocokan tidak sensitif huruf besar-kecil pada beberapa kolom adalah awal yang paling mudah. Untuk daftar kecil yang sudah dimuat di browser, memfilter di browser bahkan lebih sederhana.
Apakah saya perlu Algolia atau Elasticsearch untuk pencarian?
Biasanya tidak di awal. Full-text search Postgres menangani pencocokan kata, pemeringkatan, dan ribuan hingga jutaan baris dengan baik. Mesin pencari yang dihosting layak dipakai jika kamu membutuhkan toleransi typo yang kuat, hasil instan saat mengetik di data besar, atau penyetelan relevansi tingkat lanjut.
Mengapa pencarian saya tidak menemukan hasil saat ada salah ketik?
Pencocokan dasar dan full-text search standar mencari kata seperti yang diketik (atau bentuk dasarnya), jadi salah eja akan meleset. Kamu membutuhkan pencocokan fuzzy, seperti kemiripan trigram di Postgres atau mesin pencari dengan toleransi typo.
Apakah pencarian sebaiknya berjalan di browser atau di server?
Di server untuk apa pun yang lebih dari daftar publik kecil. Pencarian di server bisa diskalakan, menghormati izin, dan tidak mengirim seluruh datamu ke setiap pengunjung.