対象仕様

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

detalistを使う

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

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

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

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


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

デモ

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