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.
- Cara Mengatasi Error XAMPP: MySQL shutdown unexpectedly 23 Oktober 2021 68215 views
- Tutorial CRUD (Create, Read, Update & Delete) Codeigniter 4 dengan Bootstrap 14 Oktober 2021 33683 views
- Laravel 8: REST API Authentication dengan Sanctum 17 September 2021 32645 views
- Membuat REST API CRUD di Laravel 8 dengan Sanctum 18 September 2021 28836 views
- Contoh Cara Menggunakan Sweet Alert di Laravel 8 27 Agustus 2021 28205 views
Facebook 
Whatsapp 
Twitter 
Telegram