フォームへの記入が面倒に感じられることもあります。ユーザーが自由に入力できるように、複数の選択肢を用意することが重要です。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」の両方を取得するようにしてください。