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つ。

  1. <datalist>タグにid属性を設定する
  2. <datalist>タグの中に<option>タグで表示したい候補を設定する
  3. <input>タグのautocomplete属性を"on"にする
  4. <input>タグにlist属性をつけて、<datalist>タグのid属性の名前を指定する

とりあえず、Firefoxで表示。

で、候補を表示するとこんな感じ。

html5に対応していないブラウザ(特にIE6、IE8あたり？)はjQueryを使ってJavaScriptで実装したりする必要があるみたい。

ま、メモってことで。

[amazonjs asin="4883378152″ locale="JP" title="HTML5 & CSS3ステップアップブック"]

プログラミングautocomplete,datalist,HTML5,iD,IE10,IE6,IE8,IE9,input,Internet Explorer,JavaScript,jQuery,List,option,オートコンプリート,タグ,テキストボックス,ブラウザ,候補,属性