Widget HTML #1

Beranda / HTML / JavaScript

Tutorial Membuat Autocomplete Email di Form dengan Bootstrap dan jQuery

Posting Komentar

Halo, teman-teman! Apa kabarnya? Semoga semuanya baik dan selalu semangat buat ngoding ya. Kali ini, kita akan membahas sesuatu yang seru dan praktis buat diterapkan di berbagai proyek: autocomplete email di form input! Siapa sih yang nggak suka fitur autocomplete? Hemat waktu dan menghindari typo yang kadang bikin kita berasa kayak “developer” error, padahal cuma salah ketik domain email. 😅

Di tutorial ini, kita akan menggunakan Bootstrap 5.3 dan jQuery buat bikin form input yang otomatis menampilkan saran domain email saat teman-teman mengetik. Ini berguna banget kalau kalian bikin form registrasi atau login dan ingin memberikan pengalaman pengguna yang lebih mulus.

Yuk, langsung kita mulai!

Apa Itu Autocomplete?

Oke, sebelum kita terjun ke koding, mari kita bahas sedikit tentang apa itu autocomplete. Fitur ini sering banget kita lihat di aplikasi modern, dari Google sampai form registrasi email. Autocomplete ini akan memberikan saran saat kita mengetik sesuatu. Nah, di kasus kita, yang akan disarankan adalah domain email seperti gmail.com, yahoo.com, dan sebagainya.

Bayangkan begini: kita ingin mendaftar layanan tertentu, dan mulai mengetikkan email, seperti john.doe@. Setelah simbol @, program kita akan otomatis memberi saran domain seperti gmail.com atau yahoo.com. Tinggal klik, dan voila! Email lengkap, tanpa harus mengetik semuanya. Hemat waktu dan, pastinya, bikin pengguna senyum-senyum sendiri karena form kita pintar. 😉

Tools yang Kita Gunakan

Untuk proyek ini, kita akan menggunakan:

  1. HTML untuk membuat struktur form.
  2. CSS (Bootstrap 5.3) untuk membuat tampilan form yang rapi dan responsif.
  3. jQuery untuk menangani logika autocomplete, event input, dan menampilkan saran.

Jangan khawatir, teman-teman, kita nggak butuh alat berat kayak debugger di proyek ini. Kita akan jalan santai tapi tetap keren! 😎

Struktur HTML: Form Input Email

Pertama-tama, mari kita mulai dengan membuat form dasar menggunakan Bootstrap 5.3. Kita akan bikin form yang berisi input email, di mana nantinya fitur autocomplete ini akan bekerja.

<div class="container mt-5">
    <h2>Email Autocomplete dengan Bootstrap 5</h2>
    <form autocomplete="off" action="/submit">
        <div class="mb-3 position-relative">
            <label for="emailInput" class="form-label">Email address</label>
            <input id="emailInput" type="text" class="form-control" placeholder="Enter email">
            <div id="emailSuggestions" class="autocomplete-items"></div>
        </div>
    </form>
</div>

Di sini, kita menggunakan class Bootstrap seperti form-control untuk styling form yang elegan dan modern. Form ini juga punya elemen div di bawah input email yang nantinya akan kita gunakan untuk menampilkan saran email.

Menyusun Daftar Domain Email

Langkah berikutnya, kita akan membuat daftar domain email yang akan dijadikan saran. Misalnya, kita pakai domain umum seperti gmail.com, yahoo.com, outlook.com, dan sebagainya. Simpan daftar ini dalam sebuah array:

const domains = ["gmail.com", "yahoo.com", "outlook.com", "hotmail.com", "icloud.com"];

Teman-teman juga bisa menambahkan domain favorit kalian di sini. Kalau kalian tipe yang sering bikin akun palsu buat uji coba, mungkin bisa tambahin domain temanbikinfakenews.com. (Just kidding ya, jangan disalahgunakan!)

Logika jQuery: Menangani Autocomplete

Nah, ini bagian paling seru! Sekarang kita tambahkan logika menggunakan jQuery untuk menangani saran domain email berdasarkan input yang diketik pengguna. Setiap kali ada perubahan di input (event input), kita akan memeriksa apakah pengguna sudah mengetik simbol @ atau belum. Kalau iya, kita tampilkan saran domain berdasarkan string yang ada setelah simbol @.

$(document).ready(function() {
    $('#emailInput').on('input', function() {
        let inputVal = $(this).val();
        let atPos = inputVal.indexOf('@');
        let inputPrefix = inputVal.slice(0, atPos);
        let domainInput = inputVal.slice(atPos + 1);
        let suggestions = '';

        if (atPos > 0) {
            domains.forEach(domain => {
                if (domain.toLowerCase().startsWith(domainInput.toLowerCase())) {
                    suggestions += `<div class="autocomplete-item">${inputPrefix}@${domain}</div>`;
                }
            });
        }

        if (suggestions) {
            $('#emailSuggestions').html(suggestions).show();
        } else {
            $('#emailSuggestions').hide();
        }
    });

    $(document).on('click', '.autocomplete-item', function() {
        $('#emailInput').val($(this).text());
        $('#emailSuggestions').hide();
    });

    $(document).click(function(e) {
        if (!$(e.target).closest('#emailInput').length) {
            $('#emailSuggestions').hide();
        }
    });
});

Penjelasan singkat:

  • Event input: Saat pengguna mengetik, program mengecek apakah ada simbol @. Jika iya, akan muncul saran domain.
  • Autocomplete item: Saran domain akan ditampilkan dalam elemen div. Pengguna tinggal klik untuk memilihnya, dan dropdown saran akan menghilang.
  • Menutup dropdown: Kalau pengguna klik di luar input, dropdown akan otomatis tertutup. Karena, hey, kita nggak mau dropdown nge-block layar kan? Kecuali dropdown pizza, mungkin kita pengen itu selalu muncul. 🍕

Penjelasan Tambahan

Fitur ini sangat bermanfaat untuk meningkatkan user experience (pengalaman pengguna) saat mengisi form. Form yang interaktif seperti ini membuat pengguna merasa lebih nyaman dan mengurangi kesalahan input. Siapa yang nggak suka form yang ngasih saran, kan?

Kalau teman-teman punya proyek e-commerce atau form registrasi untuk aplikasi, fitur ini cocok banget buat ditambahkan. Lagipula, kita sebagai developer kan harus selalu memikirkan bagaimana membuat aplikasi yang lebih mudah digunakan, bukan?

Kesimpulan

Nah, itu tadi teman-teman tutorial membuat fitur autocomplete domain email di form input menggunakan Bootstrap 5.3 dan jQuery. Mudah kan? Dengan sedikit usaha, kita bisa bikin fitur yang membantu pengguna dan membuat aplikasi terasa lebih modern.

Jangan lupa, setelah implementasi, selalu uji coba di berbagai browser, ya. Kadang-kadang, beda browser bisa bikin fitur yang kita kira lancar jadi ngadat, seperti ketika Wi-Fi tetangga tiba-tiba mati saat kita lagi butuh banget. 😂

Semoga tutorial ini bermanfaat buat teman-teman semua. Sampai jumpa di tutorial berikutnya dan selamat ngoding!

Posting Komentar untuk "Tutorial Membuat Autocomplete Email di Form dengan Bootstrap dan jQuery"

Posting Komentar