Saat daftar sudah panjang, mencari satu item dengan menggulir halaman terasa merepotkan. Dalam tutorial pemula ini, kita akan membuat kolom pencarian yang menyaring daftar judul ketika pengguna mengetik. Kita memakai JavaScript bawaan browser, sebuah array sederhana, dan elemen HTML untuk menampilkan hasil.
Siapkan data dan elemen
Tambahkan input dengan id searchInput dan elemen kosong dengan id results pada HTML. Di JavaScript, buat array seperti const items = ["Belajar HTML", "Dasar CSS", "JavaScript pemula"]; lalu ambil kedua elemen dengan document.querySelector. Setiap teks di dalam array akan menjadi satu pilihan yang bisa dicari.
Sebelum menyaring data, tentukan cara menampilkan hasil agar daftar lama tidak menumpuk dengan daftar baru. Buat fungsi render dengan parameter daftar, lalu kosongkan elemen results sebelum mengisinya kembali. Langkah ini penting setiap kali pengguna mengubah kata pencarian.
Saring teks yang cocok
Pasang pendengar input pada searchInput agar fungsi pencarian berjalan setiap kali isi kolom berubah. Ambil kata yang diketik melalui searchInput.value.trim().toLowerCase(), kemudian gunakan items.filter(item => item.toLowerCase().includes(query)) untuk mendapatkan item yang memuat kata tersebut. toLowerCase membuat pencarian tidak membedakan huruf besar dan kecil.
Di dalam render, buat satu elemen li untuk setiap hasil memakai document.createElement("li"), lalu isi li.textContent dengan teks item dan tambahkan ke results memakai appendChild. textContent menempatkan judul sebagai teks, bukan sebagai kode HTML. Panggil render(items) sekali saat halaman selesai disiapkan agar daftar awal juga tampil sebelum pengguna mengetik.
Tangani hasil yang kosong
Jika daftar hasil berisi nol item, tampilkan pesan seperti "Tidak ada item yang cocok." dan jangan membuat elemen li. Coba cari kata "css", lalu ubah menjadi kata yang tidak ada dalam daftar untuk memeriksa kedua keadaan. Jika daftar tidak muncul sejak awal, periksa Console dan pastikan id searchInput serta results sama persis dengan yang ada di HTML.