datalist要素

結びつけられたinput要素で、使用可能または推奨されるオプションを示せます。

datalistにid属性を設定し、結びつけるinput要素のlist属性をそれと同じ値とします。

<input list="sample" />
<datalist id="sample">
    <option value="a1"></option>
    <option value="a2"></option>
    <option value="b1"></option>
    <option value="b2"></option>
</datalist>

入力欄にフォーカスを合わせる、またはフォーカスを合わせてAlt+↓を押すと候補が表示されます。

※ ブラウザによって挙動が異なります。

type属性も指定することで、種類を指定できます。

<input list="sample" type="number" />
<datalist id="sample">
    <option value="10"></option>
    <option value="20"></option>
    <option value="30"></option>
</datalist>
※ ブラウザによって挙動が異なります。

参考

HTMLの情報サイトから、まとめて検索