Skodev
Belajar coding dalam bahasa Indonesia
Tahun baru, skill baru! 🚀. Masukkan kupon "skill2025" untuk diskon 30% di kelas apa saja
Skodev
Belajar coding dalam bahasa Indonesia
Membuat fitur autocomplete di aplikasi web atau website dapat memberikan pengalaman pengguna yang lebih baik. Autocomplete, atau kemampuan suatu program untuk memprediksi sisanya dari kata atau baris yang dimasukkan pengguna, bisa sangat membantu dalam meningkatkan kecepatan dan efisiensi navigasi.
Berikut ini adalah langkah-langkah pembuatan fitur autocomplete dengan JavaScript.
Sebelum melanjutkan, pastikan kamu sudah memiliki pengetahuan dasar tentang HTML, CSS, dan tentu saja, JavaScript. Juga, pastikan komputer kamu sudah terinstall Node.js dan NPM (Node Package Manager).
Pertama, buatlah struktur HTML dasar, pastikan ada elemen input dimana pengguna dapat memasukkan teks.
<!DOCTYPE html>
<html>
<head>
<title>Autocomplete dengan JavaScript</title>
</head>
<body>
<input id="autocomplete" type="text" name="autocomplete" placeholder="Mulai mengetik...">
<div id="hasil"></div>
</body>
</html>Langkah selanjutnya adalah memasukkan JavaScript. Untuk membuat fungsi autocomplete, kita akan menggunakan konsep array dan looping dalam JavaScript.
Buatlah array berisi data yang akan digunakan pada fitur autocomplete. Data bisa berupa nama kota, nama orang, atau apapun sesuai kebutuhan aplikasi web kamu.
var data = ["Jakarta", "Bandung", "Surabaya", "Yogyakarta", "Bali", "Medan", "Palembang"];Definisikan fungsi autocomplete yang memicu fungsi setiap kali pengguna memasukkan atau mengubah teks dalam elemen input. Fungsi ini akan mencari dan menampilkan hanya entri yang sesuai dari array data.
function autocomplete(input, data) {
let hasil = [];
for (i = 0; i < data.length; i++) {
if (data[i].toLowerCase().includes(input.value.toLowerCase())) {
hasil.push(data[i]);
}
}
document.getElementById('hasil').innerHTML = hasil.join('<br>');
}
// Menghubungkan fungsi dengan elemen text input
document.getElementById('autocomplete').addEventListener('input', function() {
autocomplete(this, data);
});Selesai! Sekarang kamu telah berhasil membuat fitur autocomplete sederhana menggunakan JavaScript. Dengan menggabungkan pengetahuan ini dengan pengetahuan lain tentang JavaScript dan teknologi web lainnya, kamu bisa membuat aplikasi web yang lebih interaktif dan user-friendly.
Link terkait: