datalist要素

ブラウザの対応状況

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はあるにはあるみたいです。