[HTML] inputの入力候補をdatalistで実装する方法

対象仕様

• HTML5 に対応したモダンブラウザ
• ブラウザ標準の簡素な UI

detalist を使う

<datalist>要素を使用することで仕様から外れた DOM を実装したり、JS を走らせずに済む。

<datalist>は、フォームの入力欄などで入力候補となるデータリストを定義することができる。

<input type="text" list="browsers" />
<datalist id="browsers">
  <option value="1"></option>
  <option value="2"></option>
  <option value="3"></option>
  <option value="4"></option>
  <option value="5"></option>
</datalist>

datalistとinputは、list属性とid属性で紐づけ、対象のリスト項目は、<option>で定義する。
<datalist>～</datalist>はブラウザ上で非表示となる。

未対応のレガシーブラウザ用に polyfill（datalist-polyfill）もある。

デモ

input 要素をダブルクリックすると候補が表示される。