Unformed Building

datalist要素

公開:
更新:

パーマリンク

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

4.10.10 The datalist element — HTML5

ブラウザの対応状況

Internet Explorer
IE 10から対応。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 のサポートするウェブ標準ならびに仕様

試してみる

では実際に試してみましょうか。
まあ前のセクションでのリンク先(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要素 デモ

このように、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要素と日本語の候補

と、このように便利なわけですが、セレクトボックスの替わりに使えるかというと、それはまた別だと思います。
セレクトボックスは、制作者側が用意したものしか選択できませんが、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" />

datalist要素のフォールバック

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

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