(HTML5)datalist要素は現時点では使いものにならない
現時点ではブラウザによって表示や動作がバラバラです。
さらに、datalistをCSSで装飾することもできません。
下記のデモページを色々なブラウザで開いて試してみてください。
(デモページ)
http://www.usamimi.info/~sutara/sample2/html5_datalist.html
試したブラウザ
(OS: Windows Vista SP2)- IE9
- GoogleChrome28.0
- Firefox22.0
- Opera12.16
- Safari5.1.7
ブラウザごとの違い一覧
そもそもオートコンプリートできない
- IE9 またはそれ以下
- Safari5.1.7
autocomplete属性が"off"だとリスト表示してくれない
<input type="text" autocomplete="off" list="keywords">- Opera12.16
各項目の文字列のどの部分にでもマッチする
- Firefox22.0
'aaa', 'abb', 'acc''c'と入力した場合に'acc'が候補に表示されるのはFirefoxだけです。
逆に、他のブラウザは各項目の文字列の先頭から完全にマッチしなければ候補リストに表示されません。
option要素のvalue属性の値と、optionタグで囲んだ文字列が異なる場合、各ブラウザで候補リストの表示に違いが出る
<datalist id="keywords">
<option value="abb">111</option>
<option value="AAA">122</option>
<option value="aaa">100</option>
<option value="acc">133</option>
</datalist>
