datalist 要素

Category : HTML

テキストボックスに入力するとき、ユーザーに入力候補を表示してあげることのできる要素です。
個人的には早く普及するといいなと思っています。

ブラウザの対応状況

Internet Explorer
IE10 から対応。datalist object (Internet Explorer)
Mozilla Firefox
Firefox 4 から対応。datalist – MDN
Google Chrome
Chrome 20 から。Changeset 114545 – WebKit このへんかなあ。
datalist landed in Chrome Canary – HTML5Rocks Updates に、Canary で使えるようになったときの告知もある。
Safari
まだ。たぶん次の Safari 5.2 ですかね。
Opera
一番古いのは Opera 9 かな? Opera 9 のサポートするウェブ標準ならびに仕様

モバイルは調べてないけど、When Can I Use… ではこうなっていました。

試してみる

では実際に試してみましょうか。
まあ前のセクションでのリンク先(MDN とか HTML5Rocks)にもデモはあるんですが……。

とりあえず MDN にあるのと同じもの。

<input type="text" list="browsers" />
<datalist id="browsers">
  <option value="Internet Explorer">Internet Explorer</option>
  <option value="Mozilla Firefox">Mozilla Firefox</option>
  <option value="Google Chrome">Google Chrome</option>
  <option value="Apple Safari">Apple Safari</option>
  <option value="Opera">Opera</option>
</datalist>

このように、datalist 要素に指定した id 属性の値を、input 要素の list 属性に指定することで、サジェスト機能を使用できます。

datalist のいいところは、候補のテキストの中にある文字列なら、文字列の先頭でなくても判別してくれることです。
試しに「ex」とか入れてみると分かりやすいです。

Firefox だけみたいです。Opera と Chrome ではできませんでした。

また、個人的に最も素晴らしいと思っているのは、日本語の候補もちゃんと出てくれることです。

<input type="text" list="fruits" />
<datalist id="fruits">
  <option value="りんご">りんご</option>
  <option value="みかん">みかん</option>
  <option value="ぶどう">ぶどう</option>
  <option value="さくらんぼ">さくらんぼ</option>
  <option value="オレンジ">オレンジ</option>
  <option value="シークヮーサー">シークヮーサー</option>
  <option value="パイナップル">パイナップル</option>
  <option value="桃">桃</option>
  <option value="柚子">柚子</option>
  <option value="枇杷">枇杷</option>
</datalist>

と、このように便利なわけですが、セレクトボックスの替わりに使えるかというと、それはまた別だと思います。
セレクトボックスは、制作者側が用意したものしか選択できませんが、datalist 要素で候補を出せるとはいえ、こちらは input 要素です。任意の文字列を入れることもできます。
JavaScript や HTML フォームバリデーションで頑張ればいいのかもしれませんが、そもそもの用途が違います。
datalist はあくまでも入力候補の選択肢であるということです。

本音を言うと、セレクトボックスでも日本語入力でジャンプしたいんですけどね……。

非対応ブラウザへのフォールバック

仕様では datalist 要素は表示されない、ということになっています。
なので、対応していないブラウザでは普通の input 要素となります。

どうしても似た機能を提供したければ、先ほどのリンクにある HTML5Rocks のフォールバック方法が参考になるかと思います。

<datalist id="browsers-fallback">
  ご利用のブラウザを選択してください
  <select>
    <option value="Internet Explorer">Internet Explorer</option>
    <option value="Mozilla Firefox">Mozilla Firefox</option>
    <option value="Google Chrome">Google Chrome</option>
    <option value="Apple Safari">Apple Safari</option>
    <option value="Opera">Opera</option>
  </select>
  <br />
  選択肢になければ、こちらにご記入ください
</datalist>
<input type="text" list="browsers-fallback" />

ご利用のブラウザを選択してください
選択肢になければ、こちらにご記入ください

若干面倒ではありますが……。
一応、Polyfill はあるにはあるみたいです


個人的なサイトならもう使ってもいいかなーと思ってますが、あんまりフォーム作ることがないのでまだ使ったことはないです。
機会があったら実装してみようと思います。

Leave a Reply