This time, we will explain how to use the autocomplete attribute of the input tag to auto-complete some areas in Tokyo.
This method can be implemented using only HTML tags without using any JavaScript plugins, making it recommended for beginners.

I created an input field that automatically completes some areas in Tokyo when you type alphabet letters.

Contents
  1. CSS Settings
  2. HTML Description
  3. Demo Page for Specifying Auto-Complete Using the Input Autocomplete Attribute
  4. Summary

CSS Settings

First, let’s start with the basic CSS settings. Use the following stylesheet to style the entire page.

<style>
body {
  font-size: 18px;
  text-align: center;
  line-height: 1.6em;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 1.6em;
  padding: 20px 0 0 0;
}
p{
  padding-bottom: 20px;
}
</style>

　
In this CSS, we set the font size and text alignment. In particular, by giving appropriate spacing between headings (h1) and paragraphs (p), readability is improved.

HTML Description

Next, let’s take a look at the HTML code. The following code sets the autocomplete attribute on the input tag and uses a datalist tag to specify auto-complete candidates.

<h1>Specify auto-complete using the input autocomplete attribute</h1>
<p>When you type alphabet letters into the input field below, it will auto-complete some areas in Tokyo.</p>

<form action="./" method="post">
Tokyo:
<input type="text" name="yourarea" autocomplete="on" list="tokyo">
<datalist id="tokyo">
<option value="shibuya">
<option value="shinjuku">
<option value="ikebukuro">
<option value="meguro">
<option value="harajuku">
<option value="shinagawa">
<option value="oosaki">
<option value="gotanda">
<option value="tamachi">
<option value="yurakucho">
<option value="shinbashi">
<option value="ebisu">
<option value="ueno">
<option value="shinookubo">
<option value="kanda">
</datalist>
<br>
<br>
<input type="submit" value="Send">
</form>

　
In this HTML code, the input tag has autocomplete=”on” and list=”tokyo”. Inside the datalist tag, auto-complete candidates are specified using option tags. This allows a dropdown list of suggestions to appear when the user types into the field.

Demo Page for Specifying Auto-Complete Using the Input Autocomplete Attribute

A demo page where this actually works is available. You can check it from the link below.

Demo Page for Specifying Auto-Complete Using the Input Autocomplete Attribute

On this demo page, you can see how the above code works in practice. Feel free to try it out.

Summary

In this article, we explained how to implement an auto-complete feature using the autocomplete attribute of the input tag. Since this method works with just HTML tags and does not require any JavaScript plugins, it is very simple and convenient. It is particularly useful for helping users enter input smoothly.

Please give this easy-to-implement method a try. Introducing it into your own website or application can improve the user experience.

　
*If you reuse this content, please do so at your own risk.
Please do not reuse the Google Analytics tag in the head tag of the demo page.*

autocomplete