HTML5 : input 要素に datalist 要素リストを並べて入力候補を作成する

HTML5 の仕様の実現において、ブラウザによって振る舞いが違う事を最初に考慮すべきです。機能によっては、全く実装されていないブラウザもあるので、その場合は jQuery のプラグイン等を使用して同等の機能を実現する必要があります。

datalist をテストした、Chrome と Firefox と IE11 では、どれも実装されていましたが、表示や振る舞いに違いがあります。また、ここでは datalist 実装で想定される場合の入力フォームでの構成に便利であると思われる fieldset を使用して入力項目のグループ化を行っています。

fieldset のみでは、表示に支障があるので、いくつかの CSS を指定していますが、border-radius に関して、IE11 が動作しない事を確認しました。

趣味

好きな食べ物

Chrome

 
カーソルが over で無い場合には表示されませんが、カーソルが上に来ると、コンボボックスのようなコントロールが表示されて候補を開く事ができます

Firefox



フィールド内で下矢印を使用するか、フィールド内でマウスをクリックするかで候補を表示させます

IE11



フォーカスを得ると、候補が表示されます。

<style>
fieldset  {
	padding: 20px;
	border:1px solid #606060;
	border-radius: 12px;
	width: 300px;
	margin-bottom: 10px;
}
</style>
<form
	id="myform"
	action="http://winofsql.jp/php_get.php"
	target="myframe_datalist"
	accept-charset="utf-8">

	<fieldset>
		<legend>趣味</legend>
			<input
				type="text"
				id="mydata1"
				name="mydata1"
				list="hobby">
		<datalist id="hobby">
		<option value="読書">
		<option value="音楽">
		<option value="運動">
		</datalist>
	</fieldset>

	<fieldset>
		<legend>好きな食べ物</legend>
			<input
				type="text"
				id="mydata2"
				name="mydata2"
				list="food">
		<datalist id="food">
		<option value="寿司">
		<option value="ラーメン">
		<option value="カレーライス">
		</datalist>
	</fieldset>

	<input type="submit" name="send" value="送信">
</form>

<iframe
	name="myframe_datalist"
	frameborder="1"
	scrolling="yes"
	width="100%" height="100"
	style="margin-top:10px;">
</iframe>