Home
Topics
Laravel

Laravel
Livewire

Livewire
Software Testing

Testing
bootstrap

Bootstrap
source code

Code
HTML

HTML
CSS

CSS
Javascript

Javascript
jQuery

jQuery
How to Create an Input Autocomplete with HTML

How to Create an Input Autocomplete with HTML

Admin
Admin・ 30 Mei 2021
2 min read ・ 525 views

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.

Bootstrap CSS HTML
Artikel Sebelumnya

Cara Membuat Show and Hide Password dengan jQuery
Artikel Selanjutnya

Added Password Validation in Laravel
Tinggalkan Komentar
Loading Comments
Bookmark
Windows Linux Mac
Ctrl + D Ctrl + D ⌘ + D
Follow us
Favorit See All