html - datalistでお手軽コンボボックス

webでコンボボックスを実装するのは面倒だけれども、 実はhtmlには <datalist> というタグがあって、これを使うと手軽にコンボボックスを実現できる。

コード例)

<input list="languages">
<datalist id="languages">
    <option value="COBOL">
    <option value="Go">
    <option value="Haskell">
    <option value="Java">
    <option value="JavaScript">
    <option value="Kotlin">
    <option value="Perl">
    <option value="Python">
    <option value="PHP">
    <option value="Ruby">
    <option value="Rust">
    <option value="Swift">
</datalist>

上記のhtmlを記述するだけで次のようなコンボボックスが実現できる。

IEは非対応だがEdge以降は対応しているので、これからどんどん使っていきたい。