datalistタグ

タグ datalist は、HTML フォーム内の input 入力フィールドのオートコンプリートを作成します。

オートコンプリートの要点: ユーザーが入力フィールドに何かを入力しようとすると、利用可能な選択肢のリストを表示するポップアップヒントが下に表示されます。ユーザーは、完全に入力しなくても、提案された選択肢の中から一つを選ぶことができます。

input タグにオートコンプリートを関連付けるには、list 属性を設定し、その値に関連付ける datalist タグの id 属性を指定する必要があります。

選択肢は option タグに保存され、それが datalist タグ内に保持されます。

例

入力フィールドに国名を入力してみましょう。まず文字 'b' を入力すると、3つの国が表示されたポップアップヒントが表示されます。さらに文字 'e' を入力すると、提案される国は2つに減ります:

<input type="text" list="country">
<datalist id="country">
	<option>Belarus</option>
	<option>Belgium</option>
	<option>Bulgaria</option>
</datalist>

例

次に、option タグに value 属性を追加してみましょう。特定の国を選択すると、関連付けられたinputに入るのは国名ではなく、value 属性の内容になります:

<input type="text" list="country-value">
<datalist id="country-value">
	<option value="Belarus">Belarus - a country of lakes and potatoes</option>
	<option value="Belgium">Belgium - a country where Belgians live</option>
	<option value="Bulgaria">Bulgaria - a country for vacation</option>
</datalist>

例 . autocomplete属性の影響

提案のドロップダウンリストは、autocomplete 属性の影響を受けます。これが有効な場合（デフォルトでは有効です）、datalist タグに設定した値に加えて、ユーザーが以前このフィールドに入力した値も混ざって表示されます。

フィールドに 'Brazil' と入力して送信ボタンを押してください（送信しなければブラウザはこの国を記憶しません）。その後、この例に戻り、文字 'b' を入力すると、表示されるリストには datalist からの 3 つの国だけでなく、以前入力した国も表示されます（さらに、'Belarus' という単語で同じことを行うと、ドロップダウンリストにはこの値が2回表示されます）。

これが邪魔になる場合は、autocomplete 属性を無効にし、値 off を設定してください。

上記の操作を以下の例で試してください:

<form action="">
	<input type="text" list="country" autocomplete="on">
	<datalist id="country">
		<option>Belarus</option>
		<option>Belgium</option>
		<option>Bulgaria</option>
		<input type="submit">
	</datalist>
</form>

datalistタグ

例

例

例 . autocomplete属性の影響

関連項目