HTML5のdatalistタグを使って入力候補を補完する

HTMLのテキストフォームを構築する際に、excelのオートコンプリート機能のような、入力補完をしてくれるしくみをHTML5で実装します。

過去にこのような機能をを実装するのに、苦労してJavaScriptで無理やり実現した記憶があります。
しかし、最近、同様の機能を実装しなければならなくて改めて調べてみると、HTML5のみで実装できるようになっているんですね。こりゃ楽だ。

では、実際のコードですが、以下のように記述すると、オートコンプリート機能が有効になります。
例えば、input textタグに「list」要素に任意の「example1」を付加すると、同名のIDを指定した「datalist」タグのoption要素が入力候補としてセットされます。

<input type="text" name="example1" list="example1">
<datalist id="example1">
<option value="HTML5">
<option value="JavaScript">
<option value="CSS3">
<option value="オートコンプリート">
</datalist>

テキストエリアをダブルクリックすると、入力候補がプルダウンで表示されます。
また、「HT」のように候補の文字列を途中まで入力すると、プルダウンから「HTML5」が選択できます。
途中の文字列「Script」を入力した場合でも、きちんと「JavaScript」が選択できますね。
大文字小文字も関係なく「css」と入力すると、「CSS3」が選択できます。
もちろん、日本語にも対応しています。しかし、さすがに「おーと」とひらがなを入力しても、カタカナの「オートコンプリート」は出てきません。

対応ブラウザはGoogle Chrome、Firefox、IEは10以上で動作します。
対応していないブラウザに対してはoptionタグの外、datalistタグの内に代替テキストを記述することができます。代替テキストは対応ブラウザでは表示されません。

<input type="text" name="example1" list="example1">
<datalist id="example1">
<option value="HTML5">
<option value="JavaScript">
<option value="CSS3">
<option value="オートコンプリート">
※ご覧のブラウザではオートコンプリート機能には対応していません
</datalist>

「必須チェックは可能？」など、細かい設定ができるのか気になるところですが、活用可能かどうか、とりあえずもう少しいじってみたいと思います。