技術資料

error この記事は最終更新日から1年以上が経過しています。

select要素的な感じにしつつ、フリー入力出来たりレコメンド表示できたりする datalist 要素が便利だったのでメモ。

<input list="genre_list" value="" name="item_genre">
<datalist id="genre_list">
    <option value="演歌">演歌</option>
    <option value="アニメ&主題歌">アニメ&主題歌</option>
    <option value="ハードロック">ハードロック</option>
    <option value="ロック">ロック</option>
</datalist>

これでフリー入力もできて、候補から選択もできる。入力途中でレコメンドも出る。

See the Pen datalist要素のサンプル by nanaka (@nanaka_tokiwa) on CodePen.