Cara Membuat Autocomplete Input dengan HTML

Cara Membuat Autocomplete Input dengan HTML

Admin
Admin・ 20 April 2021
5 min read ・ 4263 views

Autocomplete Input HTML - Hayy teman-teman, jumpa lagi dengan artikel baru seputar web design di Bisabos.com. Dalam artikel ini saya akan membagikan tips trik bagaimana cara membuat autocomplete input atau bisa juga live search dengan HTML. Di percobaan ini kita pure hanya akan menggunakan HTML saja namun sebagai tambahan di akhir artikel kita akan mempercantik tampilan dengan Bootstrap 5.

Sekilas mengenai autocomplete input digunakan untuk mempermudah user dalam menginput data pada form input dari data yang telah disediakan. Mungkin artikel membuat autocomplete input ini bisa jadi salah artikel tersingkat yang pernah dibagikan.

Bagaimana cara membuat autocomplete input dengan HTML ? berikut ini langkah-langkah singkatnya.

Pertama kita akan membuat file HTML baru yang akan digunakan dalam percobaan ini. Disini saya akan membuat file HTML dengan nama index.html, kemudian teman-teman bisa copy starter code di bawah ini dan paste di file HTML yang baru saja dibuat.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Autocomple Input with HTML</title>
</head>
<body>
    
</body>
</html>

Disini kita sudah mempunyai starter code HTML 5, dan jika kita save dan coba kita buka di browser hasilnya akan kosong, karena memang kita belum mempunya apa-apa di dalam tag <body></body>. Nah selanjutnya, tambahkan kode di bawah ini agar bisa terlihat apa sih yang akan kita buat.

<h1>Autocomplete Input with HTML</h1>
    <input list="regionList" placeholder="Input Your Region">
    <datalist id="regionList">
        <option value="Jawa Timur">
        <option value="Jawa Tengah">
        <option value="Jawa Barat">
        <option value="DI. Yogyakarta">
        <option value="Bali">
    </datalist>

Tambahkan kode tambahan di atas di dalam tag <body></body>. Penjelasan singkat mengenai kode di atas, jadi kita akan menambahkan label H1 Autocomple input with HTML yang kita fungsikan sebagai judul. Kemudian kita tambahkan form input dengan list id regionList, dimana saat kita input text pada form input tersebut dia otomatis akan mencari data yang terdaftar di datalist dengan id regionList (sama dengan id input list). Di dalam datalist ada beberapa data option yang mempunyai value, nah data inilah yang akan dicari ketika kita input text pada form input.

Sekarang coba save atau simpan dan coba buka pada browser, kemudian coba input beberapa karakter teks pada form. Dari sini kita sudah berhasil membuat autocomplete input atau bisa juga difungsikan sebagai live search dengan HTML.

Tapi sampai sini tampilannya masih kurang menarik, bagaimana cara agar tampilan form lebih manarik ? tenang saja, jawabannya simple. Kita bisa menggunakan bootstrap untuk mempercantik tampilan form. Disini sudah saya siapkan kode untuk mempercantik tampilan mini project membuat autocomplete input dengan HTML. Kode di bawah ini adalah kode yang sudah saya sesuaikan agar tampilannya lebih menarik menggunakan bootstrap. Silahkan copy semua kode di bawah ini, kemudian replace semua kode yang ada di file index.html tadi.

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
        <title>Autocomplete input with HTML</title>
    </head>
    <body>
        <div class="container">
            <div class="row py-5">
                <div class="card text-dark bg-light position-absolute top-50 start-50 translate-middle mb-3" style="max-width: 25rem;">
                    <div class="border-bottom p-3 text-center">Autocomplete Input with HTML</div>
                    <div class="card-body">
                        <form>
                            <div class="mb-3">
                                <label for="name" class="form-label">Name</label>
                                <input type="text" class="form-control" id="name" placeholder="Your Name">
                            </div>
                            <div class="mb-3">
                                <label for="Region" class="form-label">Region</label>
                                <input list="list" class="form-control" placeholder="Input Your Region">
                                <datalist id="list">
                                    <option value="Jawa Timur">
                                    <option value="Jawa Tengah">
                                    <option value="Jawa Barat">
                                    <option value="DI. Yogyakarta">
                                    <option value="Bali">
                                </datalist>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
    </body>
</html>

Coba save dan buka di browser kalian.

tips trik membuat autocomplete input dengan HTML

Oke, kita sudah mendapatkan tampilan yang jauh lebih menarik daripada sebelumnya. Tidak ada banyak perubahan dari kode yang awal kita buat, di langkah ini kita hanya menambahkan bootstrap dan style-style bootstrap untuk membuat tampilan mini project membuat autocomplete input dengan HTML jauh lebih menarik.

Kesimpulan

Di percobaan pada artikel ini kita telah sama-sama belajar dan mengetahui tips trik bagaimana cara mudah membuat autocomple input hanya dengan menggunakan HTML dan dengan memanfaatkan bootstrap untuk mempercantik tampilannya. Artikel tips trik ini mungkin saja dapat berguna untuk keperluan web design kita.

Sekian artikel kali, jika ada saran, kritik, masukan atau apapun itu yang ingin didiskusikan, silahkan kalian tulis komentar di form diskusi di bawah ini. Nantikan terus artikel berikutnya dari kami yang selalu kita update di media sosial kami (facebook, instagram, twitter, chanel telegram). Jika kalian belum follow kami, silahkan follow agar tidak ketinggalan postingan terbaru dari kami.

See you

Tinggalkan Komentar
Loading Comments