HTML PR

inputのautocomplete属性を使った自動補完機能(オートコンプリート)の実装方法

記事内に商品プロモーションを含む場合があります

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

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

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タグで指定しています。これにより、ユーザーが入力フィールドに文字を入力すると、候補がドロップダウンリストとして表示されます。

inputのautocomplete属性を使って自動補完(オートコンプリート)を指定するデモページ

実際に動作するデモページを用意しました。以下のリンクから確認できます。

inputのautocomplete属性を使って自動補完(オートコンプリート)を指定するデモページ

このデモページでは、上記のコードが実際にどのように動作するかを確認できます。ぜひ、試してみてください。

まとめ

今回は、inputタグのautocomplete属性を使った自動補完機能の実装方法について解説しました。この方法は、JavaScriptのプラグインを使わずに、HTMLタグだけで実現できるため、非常に簡単で便利です。特に、ユーザーが入力をスムーズに行えるようにするために役立ちます。

簡単に実装できるこの方法をぜひ試してみてください。自分のWebサイトやアプリケーションに導入することで、ユーザーエクスペリエンスを向上させることができます。

 
※流用される場合は自己責任でお願いします。
 デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。