html5メモ inputタグで入力の候補を表示してみる
野暮用で必要になったので、試してみる。
htmlページはこんな感じ。
<html>
<!-- header -->
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<!-- body -->
<body>
<datalist id="color">
<option value="red" />
<option value="green" />
<option value="blue" />
</datalist>
<input type="text" autocomplete="on" list="color">
</body>
</html>
やるこた4つ。
- <datalist>タグにid属性を設定する
- <datalist>タグの中に<option>タグで表示したい候補を設定する
- <input>タグのautocomplete属性を"on"にする
- <input>タグにlist属性をつけて、<datalist>タグのid属性の名前を指定する
とりあえず、Firefoxで表示。
で、候補を表示するとこんな感じ。
html5に対応していないブラウザ(特にIE6、IE8あたり？)はjQueryを使ってJavaScriptで実装したりする必要があるみたい。
ま、メモってことで。