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

Eiji Kitamura

フォームの記入は面倒に感じることがあります。ユーザーに複数の選択肢を提示しつつ、自由に入力できるようにすることが重要です。datalist 要素（Chrome Canary（M20）に追加されたばかり）を使用すると、この作業は簡単に行えます。

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 が使用可能な場合、option 要素を除く datalist の下にあるすべての要素が非表示になります。このフォールバック メカニズムを使用する場合は、サーバーが「fruit_sel」と「fruit」の両方をクエリ パラメータとしてキャッチするようにしてください。