datalistタグでドロップダウンを作成
<datalist>タグは、フォームの入力欄などで入力候補となるデータリストを定義します。
データ項目は<option>タグを使います。
この機能を利用することで、<input> 要素にオートコンプリート機能を作ることができ、入力時にあらかじめ定義されたオプションのドロップダウンリストが作成されます。
<input>タグのlist属性の値と、 <datalist>タグのid属性の値を同じにすることで、入力欄とデータリストを関連付けることができます。
デモ:
code:html
<input list="browsers"/>
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
参考