HTML テキストボックスの入力候補リスト（datalist）

JavaScriptやjQueryを利用しなくてもHTML5だけで動的なことも出来るようになってきました。
例としてHTML5のdatalistタグを利用すれば、関連付けされているテキストボックスに「入力候補リスト」を表示させることができます。
入力補完というやつですね。
この機能を利用すると、ユーザーが入力した文字に近い候補を表示・選択させることができます。
UI向上につながりますね！

「datalistタグ」がセレクトボックスと違う点は「入力候補リストに無いものも自由に入力できる」という点です。
ユーザーには純粋に入力補完として利用してもらえます。

HTML側（テキストボックスの入力候補リスト）

[ 3行目 ]
「list属性」に「datalist」の「id」と同じものを入力して関連付けをおこないます。

[ 4行目〜12行目 ]
「datalist」の定義を記述します。補完対象は「option」で定義できます。

以上で入力補完リストが表示されるテキストボックスが完成です。
サンプルを作成していますので参考にして貰えると嬉しいです。

注意点としては、ブラウザによって見た目や挙動が異なる可能性があるので注意してください。
※手元の環境ではSafariで動作しませんでした。

動作してもしなくても害にはならないと思いますので、使えるようであればどんどん使っていきたいですね。