
Cara Membuat Autocomplete Input dengan HTML

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.
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
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 67046 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 32220 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 31779 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28528 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 27859 views