Panduan

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

PendekatanCara kerjaCocok untukBatasan
Filter di browserMuat daftar, filter dengan JavaScriptDaftar publik kecil (beberapa ratus item)Mengirim semua data ke setiap pengunjung; lambat dengan daftar besar
Pencocokan pola databaseKueri server seperti "nama mengandung teks", tidak sensitif huruf besar-kecilAplikasi kecil hingga menengah, alat adminTanpa pemeringkatan; bisa lambat di tabel besar; tanpa stemming
Full-text search databasePostgres mengindeks kata dan memberi peringkat pada hasil yang cocokSebagian besar aplikasi berkonten banyakLemah dengan typo kecuali kamu menambahkan pencocokan fuzzy
Pencocokan fuzzy (trigram)Postgres membandingkan urutan karakter untuk kemiripanNama, kolom pendek, toleransi typoMembutuhkan ekstensi dan indeks; penyetelan memerlukan perhatian
Mesin pencari yang dihostingLayanan terpisah mengindeks datamu (Algolia, Meilisearch, Typesense, Elasticsearch, dan lainnya)Katalog besar, pencarian instan, toleransi typo yang kuatLayanan 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

  1. Daftarkan apa yang dicari orang. Kolom mana (judul, deskripsi, tag, nama)? Filter mana? Tanyakan beberapa pengguna nyata jika kamu bisa.
  2. Mulai dari server. Tambahkan rute API yang menerima kueri dan filter, dan mengembalikan satu halaman hasil. Jangan memuat semuanya ke browser.
  3. 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.
  4. Tambahkan paginasi sejak awal — nomor halaman atau "muat lebih banyak".
  5. 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.
  6. Debounce pencarian saat mengetik. Tunggu beberapa ratus milidetik setelah berhenti mengetik sebelum melakukan kueri, sehingga kamu tidak mengirim permintaan untuk setiap ketukan tombol.
  7. Tambahkan indeks setelah kamu tahu kolom mana yang kamu filter dan cari.
  8. Tingkatkan ke full-text search, lalu pencocokan fuzzy, lalu mesin pencari yang dihosting — hanya saat langkah yang lebih sederhana gagal bagi pengguna nyata.
  9. 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.

Mythex · Pricing · Bangun apa pun dengan AI · Template website dan aplikasi · Mythex dibandingkan · Glosarium membuat aplikasi dengan AI · Alat gratis untuk membuat aplikasi dengan AI · English

English አማርኛ العربية Български বাংলা Bosanski Català Čeština Dansk Deutsch Ελληνικά Español Español (España) Eesti فارسی Suomi Français Français (Canada) ગુજરાતી हिन्दी Hrvatski Magyar Հայերեն Íslenska Italiano 日本語 ქართული Қазақ тілі ಕನ್ನಡ 한국어 Lietuvių Latviešu Македонски മലയാളം Монгол मराठी Bahasa Melayu မြန်မာ Norsk bokmål Nederlands ਪੰਜਾਬੀ Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Slovenščina Soomaali Shqip Srpski Svenska Kiswahili தமிழ் తెలుగు ไทย Tagalog Türkçe Українська اردو Tiếng Việt 简体中文 繁體中文(香港) 繁體中文(台灣)