Cara Membuat Pencarian Artikel di Halaman dengan JavaScript

Pencarian lokal membantu pengunjung menemukan kartu artikel yang sedang terlihat. Contoh ini menyaring teks yang sudah dimuat di halaman, bukan mencari semua posting Blogger.

Hal yang perlu diperhatikan

• Filter teks secara langsung
• Tidak butuh API eksternal
• Informasi saat tidak ada hasil
• Logika mudah dikembangkan

Cara menerapkannya

Mulailah dari versi paling sederhana dan pastikan struktur HTML tetap mudah dipahami. Setelah fungsi dasar bekerja, atur tampilan melalui CSS seperlunya. Coba skenario layar besar, layar kecil, serta kondisi ketika isi artikel lebih panjang dari perkiraan.

Contoh JavaScript

const input = document.querySelector("#filter-artikel");
input?.addEventListener("input", () => {
  const q = input.value.toLowerCase();
  document.querySelectorAll(".kartu-artikel").forEach(card => {
    card.hidden = !card.textContent.toLowerCase().includes(q);
  });
});

Tips sebelum dipublikasikan

1. Jelaskan bahwa hasil hanya dari konten yang dimuat.
2. Hindari mengubah HTML asli setiap ketikan.
3. Pertimbangkan debounce untuk daftar sangat panjang.

Catatan untuk pengguna FajriLab

Contoh ini dibuat sebagai materi demonstrasi untuk menguji gaya artikel FajriLab. Sesuaikan kode, pengaturan, dan kebutuhan aksesibilitas sebelum digunakan pada situs produksi.

Saat artikel sebenarnya siap diterbitkan, ganti gambar sementara, perbarui isi sesuai hasil pengujian, lalu periksa tautan serta tampilan responsif. Artikel contoh ini tidak dimaksudkan sebagai klaim bahwa suatu produk atau fitur sudah tersedia.