inputのautocomplete属性を使った自動補完機能（オートコンプリート）の実装方法｜DAD UNION

今回は、inputタグのautocomplete属性を使って、入力項目に都内の一部エリアを自動補完する方法について解説します。
この方法は、JavaScriptのプラグインを使わずに、HTMLタグだけで実現できるため、初心者にもおすすめです。

入力項目にアルファベットを入力すると都内の一部エリアを自動補完するinputエリアを作ってみました。

Contents

CSSの設定
HTMLの記述
inputのautocomplete属性を使って自動補完（オートコンプリート）を指定するデモページ
まとめ

CSSの設定

まずは、基本的なCSSの設定から始めましょう。以下のスタイルシートを使用して、ページ全体のスタイルを整えます。

<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>

　
このCSSでは、フォントサイズやテキストの配置を設定しています。特に、見出し（h1）と段落（p）の間隔を適切に取ることで、読みやすさを向上させています。

HTMLの記述

次に、HTMLの記述を見ていきましょう。以下のコードを使用して、inputタグにautocomplete属性を設定し、datalistタグを使って自動補完の候補を指定します。

<h1>inputのautocomplete属性を使って自動補完（オートコンプリート）を指定</h1>
<p>以下の入力項目にアルファベットを入力すると、都内の一部エリアを自動補完（オートコンプリート）します。</p>

<form action="./" method="post">
都内:
<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="送信">
</form>

　
このHTMLコードでは、inputタグにautocomplete=”on”とlist=”tokyo”を設定しています。そして、datalistタグ内に自動補完の候補をoptionタグで指定しています。これにより、ユーザーが入力フィールドに文字を入力すると、候補がドロップダウンリストとして表示されます。