Chrome Canary 版データリストの提供

フォームへの記入が面倒に感じられることもあります。ユーザーが自由に入力できるように、複数の選択肢を用意することが重要です。Chrome Canary(M20)で導入された datalist 要素を使用すると、この作業が簡単になります。

datalist を使用すると、ユーザーが選択する必要がある検索結果候補のリストをアプリで定義できます。リストからオプションを選択するか、自由形式のテキストを入力できます。

ライブデモ:

各オプションを datalist と組み合わせるには、input 要素の list 属性で id を指定します。

<input type="text" value="" list="fruits" />
<datalist id="fruits">
    <option value="Apple"></option>
    <option value="Orange"></option>
    <option value="Peach"></option>
</datalist>

datalist は最新の Firefox、Opera、Internet Explorer バージョン 10 以降で広く利用できます。互換性をそれほど気にする必要はありませんが、複数のブラウザ間で動作することを確認するには、次の手順を試してください。

<datalist id="fruits">
    Pick your favorite fruit
    <select name="fruit_sel">
    <option value="Apple">Apple</option>
    <option value="Orange">Orange</option>
    <option value="Peach">Peach</option>
    </select>
    or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />

ブラウザで datalist を使用できる場合、datalist の下の要素(option 要素を除く)はすべて非表示になります。このフォールバック メカニズムを使用する場合は、サーバーがクエリ パラメータとして「fruit_sel」と「fruit」の両方を取得するようにしてください。