Input Terkontrol dengan Daftar Saran

Komponen pelengkapan otomatis memiliki dua bagian utama: masukan teks terkontrol dan daftar saran tarik-turun. Masukan berada dalam alur dokumen normal, sedangkan daftar tarik-turun diposisikan secara absolut tepat di bawahnya. Keduanya berfungsi sebagai satu komponen interaktif, meskipun merupakan elemen DOM yang terpisah.

Anda memerlukan empat variabel status: inputValue (teks — isi yang diketik), suggestions (larik — elemen yang cocok saat ini), isOpen (boolean — apakah daftar tarik-turun terlihat), dan selectedIndex (angka — saran mana yang disorot untuk navigasi papan ketik, dimulai dari -1 yang berarti tidak ada yang dipilih).

Jadikan masukan sepenuhnya terkontrol: value={inputValue} dan onChange={e => setInputValue(e.target.value)}. Ini memberi React kendali penuh atas teks yang ditampilkan. Setiap penekanan tombol memperbarui status, yang memicu perenderan ulang dengan nilai baru. Jangan pernah menggunakan masukan yang tidak terkontrol untuk pelengkapan otomatis—Anda perlu membaca dan mengatur nilainya secara terprogram.

Saat saran berasal dari larik lokal, lakukan penyaringan pada setiap perenderan berdasarkan inputValue: bandingkan setiap elemen menggunakan item.toLowerCase().includes(inputValue.toLowerCase()). Anda dapat menghitungnya dengan useMemo jika daftarnya besar agar tidak menghitung ulang pada setiap perenderan ulang. Untuk daftar kecil, penyaringan langsung sudah memadai.

Tampilkan daftar tarik-turun ketika inputValue.length > 0 dan suggestions.length > 0. Tutup saat masukan kehilangan fokus, dengan penundaan singkat agar klik saran sempat tercatat terlebih dahulu, saat saran dipilih, atau saat tombol Escape ditekan. Atur isOpen dengan semestinya untuk mengendalikan perenderan kondisional.

Peristiwa onBlur terjadi saat masukan kehilangan fokus, yang terjadi ketika pengguna mengeklik saran. Jika Anda langsung menutup daftar tarik-turun saat kehilangan fokus, klik pada saran tidak pernah tercatat karena daftar tersebut menghilang sebelum klik terjadi. Gunakan setTimeout(() => setIsOpen(false), 150) agar klik sempat tercatat.

Posisikan daftar tarik-turun dengan position: absolute agar menutupi konten di bawah masukan alih-alih mendorongnya ke bawah. Tetapkan z-index yang tinggi (100+) agar daftar tersebut muncul di atas konten lain. Tetapkan max-height bersama overflow-y: auto agar daftar tidak menjadi terlalu tinggi saat banyak hasil tersedia.

Setiap elemen saran harus memiliki pengendali onClick: onClick={() => { setInputValue(suggestion); setIsOpen(false); }}. Ini menetapkan masukan ke saran yang dipilih dan menutup daftar tarik-turun. Pemilihan terasa seketika dan alami, sesuai dengan perilaku yang diharapkan pengguna dari kolom pelengkapan otomatis.

Alternatif untuk pewaktu kehilangan fokus adalah menggunakan onMouseDown={e => e.preventDefault()} pada setiap elemen saran. Ini mencegah tindakan tekan tetikus merebut fokus dari masukan, sehingga peristiwa kehilangan fokus tidak pernah terjadi saat mengeklik saran. Masukan tetap mendapatkan fokus dan pengendali klik berjalan dengan baik.

Pelengkapan otomatis yang baik harus dapat dinavigasi dengan papan ketik. Pengguna harus dapat menekan ArrowDown untuk menyoroti saran pertama, terus menekannya untuk bergerak ke bawah dalam daftar, menekan Enter untuk memilih, dan menekan Escape untuk menutup tanpa memilih. Hal ini diterapkan dengan menangani onKeyDown pada elemen masukan.

Setiap kali pengguna mengetik dan inputValue berubah, atur ulang selectedIndex ke -1. Ini menghapus pilihan papan ketik sebelumnya sehingga kumpulan saran tersaring yang baru dimulai tanpa sorotan. Indeks pilihan usang yang menunjuk ke elemen berbeda setelah daftar berubah akan membingungkan dan tidak benar.

Komponen pelengkapan otomatis memerlukan empat variabel status: inputValue, suggestions, isOpen, dan selectedIndex. Gunakan masukan terkontrol, saring saran berdasarkan masukan, dan kelola visibilitas daftar tarik-turun melalui isOpen. Tangani kondisi perlombaan kehilangan fokus-sebelum-klik dengan pewaktu atau preventDefault pada onMouseDown. Atur ulang selectedIndex setiap kali masukan berubah.