
How to Create an Input Autocomplete with HTML

HTML Autocomplete Input - In this article I will share tips and tricks on how to make autocomplete input or you can also live search with HTML. In this experiment we will only use pure HTML.
At a glance, autocomplete input is used to make it easier for users to input data on the input form from the data that has been provided.
How do I make an input autocomplete with HTML ? Here are the short steps.
First we will create a new HTML file that will be used in this experiment. Here I will create an HTML file named index.html, then friends can copy the starter code below and paste it in the HTML file that was just created.
<!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>
Here we already have the HTML 5 starter code, and if we save and try to open it in the browser the result will be empty, because we don't have anything in the <body> </body>
tag yet. Now then, add the code below so you can see what we are going to make.
<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>
Add the additional code above inside the <body> </body>
tag. A brief explanation of the code above, so we will add the H1 Autocomple input with HTML label which we will function as a title. Then we add the input form with the list id regionList, where when we input text on the input form it will automatically look for the data registered in the datalist with the id regionList (the same as the input list id). In the datalist there are several data options that have value, now this data will be searched for when we input text in the input form.
Now try to save or save and try opening it in the browser, then try to input some text characters on the form. From here we have succeeded in making autocomplete input or it can also be used as a live search with HTML.
- Navbar on Scroll, Membuat Animasi Navbar Saat Scroll Up & Scroll Down
- Tutorial Lengkap Belajar JavaScript Untuk Pemula
- Mengenal Apa itu DOM API pada Javascript
- Cara Membuat Copy to Clipboard dengan Javascript
- Mengenal 3 Macam Jendela Dialog pada Javascript, Selengkapnya di Sini!
- Cara Membuat Animasi Mengetik Teks Dengan CSS dan Javascript
- Cara Membuat Autocomplete Input dengan HTML
- Belajar Javascript: Mengenal Variabel dan Tipe Data pada Javascript
- Cara Instal VS Code di Linux yang Perlu Anda Ketahui
- Cara Membuat Show and Hide Password dengan jQuery
Windows | Linux | Mac |
---|---|---|
Ctrl + D | Ctrl + D | ⌘ + D |
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 23621 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 19563 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 17097 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 13290 views
- Panduan Lengkap Cara Membuat Blog dengan Laravel 8 dan Bootstrap 30 Juli 2021 11038 views