【HTML】datalist で入力候補（オートコンプリート）を表示する方法｜input の list 属性を解説

入力フォームで、ユーザーに候補を見せながら自由に文字を入力してもらいたい。そんなときに使えるのが HTML の <datalist> 要素と、<input> の list 属性です。入力欄に候補（オートコンプリート）を表示しつつ、リストにない値もそのまま入力できるのが特徴です。この記事では、list 属性と <datalist> の id を結びつける基本の書き方から、<option> の value と label の扱い、対応する input type、候補が出ないときの原因まで、コーディング初心者〜中級者の方に向けて MDN の仕様に沿って解説します。

datalist と input の list 属性とは

<datalist> は、入力欄に表示する「候補の一覧」を定義するための要素です。中に <option> 要素を並べ、その値が入力候補になります。<datalist> 自体は画面には表示されず、結びつけた <input> にフォーカスしたり文字を打ち込んだりしたときに、候補としてブラウザが表示します。

大事なのは、これがあくまで「入力の補助」だという点です。候補が表示されても、ユーザーは一覧にない値を自由に入力できます。決められた選択肢から1つを選ばせる <select> とは目的が異なり、<datalist> は自由入力を妨げずに、よく使う値を素早く入れられるようにするためのものです。この違いは後ほど改めて整理します。

input と datalist を結びつける基本の書き方

使い方はシンプルです。<datalist> に id を付け、その id と同じ値を <input> の list 属性に指定します。この list 属性と id が一致していることで、両者が結びつきます。あとは <datalist> の中に <option> を並べれば、その value が入力候補になります。

下のデモは、テキスト入力に果物の候補を表示する最小の例です。入力欄をクリックしたり文字を打ち込んだりすると候補が現れますが、候補にない言葉もそのまま入力できることを確かめてみてください。

<div class="demo">
  <label for="fruit">好きな果物を入力</label>
  <input
    type="text"
    id="fruit"
    name="fruit"
    list="fruit-list"
    placeholder="入力すると候補が出ます">
  <datalist id="fruit-list">
    <option value="りんご"></option>
    <option value="みかん"></option>
    <option value="バナナ"></option>
    <option value="ぶどう"></option>
    <option value="いちご"></option>
  </datalist>
</div>

.demo {
  font-family: sans-serif;
  padding: 16px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #333;
}

input {
  width: 260px;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

ポイントは <input> の list="fruit-list" と <datalist> の id="fruit-list" が同じ文字列になっていることです。この2つがそろっていれば、入力欄に候補が表示されます。<datalist> は <input> の中ではなく、ページ内のどこに置いても構いません。

option の value と label・テキストの扱い

候補の中身は <option> 要素で表します。先ほどの例のように value 属性に候補となる値を書くのが基本です。<datalist> の中では、value 属性に書いた文字列が、実際に入力欄へ補完される値になります。

補足の説明を添えたいときは label 属性を使えます。label は候補の説明テキストで、ブラウザによっては value と並べて表示されます。なお、<datalist> 内の <option> でタグの中にテキストを書いた場合（<option>りんご</option> のような書き方）、value 属性が無ければそのテキストが値として扱われます。意図を明確にするため、候補の値は value 属性で指定するのが分かりやすいです。各属性の役割を整理すると次のとおりです。

type を変えて候補を出す（email・url など）

<datalist> は type="text" 以外の <input> でも使えます。type="email" や type="url"、type="search"、type="tel" など、文字を入力する種類の input であれば、同じように list 属性で候補を出せます。よく使うメールアドレスや URL を候補にしておくと、入力の手間を減らせます。

下のデモは type="email" に <datalist> を組み合わせ、label 属性で各アドレスの説明を添えた例です。value に実際のアドレス、label に用途を書いています。

<div class="demo">
  <label for="email">メールアドレスを入力</label>
  <input
    type="email"
    id="email"
    name="email"
    list="domain-list"
    placeholder="name@example.com">
  <datalist id="domain-list">
    <option value="info@example.com" label="代表アドレス"></option>
    <option value="support@example.com" label="サポート窓口"></option>
    <option value="sales@example.com" label="営業窓口"></option>
  </datalist>
</div>

.demo {
  font-family: sans-serif;
  padding: 16px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: bold;
  color: #333;
}

input {
  width: 280px;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-sizing: border-box;
}

input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

このように、入力の種類に合わせて候補を用意できます。なお type="range" や type="color" など一部の input でも list は使えますが、その場合は候補の表示のされ方が文字入力とは異なります。まずは文字入力系の type で使うのが分かりやすいでしょう。

候補が表示されないときに確認すること

list 属性と datalist の id が一致していない

候補が出ない原因として最も多いのが、<input> の list 属性の値と <datalist> の id がずれているケースです。list="fruit-list" と書いているのに <datalist id="fruitlist"> のようにハイフンの有無や綴りが違うと、両者が結びつかず候補は表示されません。大文字・小文字の違いや、余計なスペースが入っていないかも含めて、2つの文字列が完全に一致しているか確認してください。

option に値が指定されていない

結びつけは正しくても、<option> に value 属性もタグ内テキストも無いと、候補として表示する中身がありません。各 <option> に value 属性を付けて値を指定しているか確認しましょう。空の <option></option> が並んでいないか見直すとよいです。

id がページ内で重複している

id はページ内で一意である必要があります。同じ id を持つ要素が他にもあると、list 属性がどの要素を指すか曖昧になり、意図どおりに候補が出ないことがあります。<datalist> の id は他の要素と重複しない名前にしてください。

select との違いは「自由入力できるかどうか」

<datalist> は見た目が <select> のプルダウンと似ているため混同されがちですが、役割は明確に異なります。<select> は用意した <option> の中から1つ（または複数）を「選ばせる」ための部品で、原則としてリストにない値は選べません。一方の <datalist> は、入力を「補助する」ための候補であり、ユーザーは候補にない値も自由に入力できます。

言い換えると、選択肢を限定して確実にその中から選んでほしいなら <select>、よく使う値をヒントとして見せつつ自由な入力も許したいなら <datalist> が向いています。地名や商品名のように候補が多く、入力の手間を減らしたいフォームでは <datalist> が便利です。目的に応じて使い分けましょう。

ブラウザによる表示の違い

<datalist> の候補は、どのように表示されるかがブラウザによって異なります。候補リストの見た目や、label 属性をどう表示するか、入力済みの文字で候補を絞り込むかどうかなどは、ブラウザの実装にゆだねられています。CSS で候補の見た目を細かく調整することも基本的にはできません。

そのため、表示の細部に依存した設計は避け、「候補を出して入力を補助する」という本来の役割の範囲で使うのが安全です。候補の表現や絞り込みの挙動を完全に制御したい場合は、JavaScript で独自のオートコンプリートを実装することになりますが、まずは標準の <datalist> で足りるかを検討するとよいでしょう。

まとめ

<datalist> と <input> の list 属性を使うと、JavaScript なしで入力候補（オートコンプリート）を表示できます。書き方の要点は、<datalist> に id を付け、その値を <input> の list 属性に一致させること、そして候補を <option> の value 属性で指定することの2つです。type="email" や type="url" など文字入力系の input でも使え、label 属性で説明を添えられます。候補が出ないときは、まず list と id が一致しているかを確認しましょう。選択肢を限定する <select> と違い、<datalist> は自由入力を残したまま入力を補助できるのが最大の特徴です。

参考ページ

• <datalist>: データリスト要素 – HTML: ハイパーテキストマークアップ言語 | MDN
• <input>: 入力欄（フォーム入力）要素（list 属性） – HTML | MDN
• <option>: HTML の選択肢要素 – HTML: ハイパーテキストマークアップ言語 | MDN