[52] 入力候補のリストを作ろう datalist要素

<datalist>要素は、<input>要素のテキスト入力部品（ただしtype="password"以外）の、 入力候補をリストで出す ための要素。
単独で使う事は無く、必ず<input>のテキスト入力部品（type="password"以外）とセットです。これは HTML5から新しく加わった要素です。

<datalist>のほうに id属性で名前を付けておいて、<input>でその idを list属性で呼び出して使います。
リスト項目には<option>要素を使用。<datalist> は <option>要素と一緒に使うってことです。

具体的にはこんなかんじ。コレ ↓ は単なるテキストフィールドですが、ダブルクリックで「リスト」が出ます。

<input type="text" name="name" placeholder="ダブルクリックしてください" list="exlist">
<datalist id="exlist">
<option value="サンプル1">
<option value="サンプル2">
<option value="サンプル3">
</datalist>

<datalist>要素は、IE, Edge, Chrome（Android版も含む）, Firefox で使えますが、残念ながら Safari（iOS Safariも含む）は未対応です。

使用する要素	<datalist> 〜 </datalist> <option>　（</option>をつけてもOK）

datalistの属性	id属性、その他のグローバル属性
optionの属性	value属性、label属性、グローバル属性

datalist が使える フォーム部品

<input type="text"> （1行のテキストフィールド） <input type="search"> （検索キーワードの入力フィールド） <input type="tel">（電話番号） <input type="url">（URL） <input type="email">（メールアドレス） <input type="datetime">（日時（タイムゾーン有）） <input type="datetime-local">（日時（タイムゾーン無）） <input type="date"> （日） <input type="month">（月） <input type="week"> （週） <input type="time"> （時間（タイムゾーン無）） <input type="number">（数値） <input type="range"> （数値（割合）） <input type="color"> （色）

<datalist>で入力候補のリストを出そう（基本形）

●サンプル1
冒頭でも紹介している基本形です。

<datalist>〜<datalist>の中に、必ず<option>要素の value属性を使ってリスト項目を指定。
リストを出したい<input>要素とは id名で関連づけます。
id名は<input>要素では list属性で呼び出します。

<input type="text" name="name" placeholder="ダブルクリックしてください" list="sample1">
<datalist id="sample1">
<option value="リスト項目1">
<option value="リスト項目2">
<option value="リスト項目3">
</datalist>

<option>要素は、上の例のように終了タグ</option>を省略できます。
下のようにつけてもOK。
ただし、option要素内にテキストを入れてはダメ。選択肢のテキストは必ず value属性で指定します。
<datalist>要素に未対応のブラウザで、選択肢が最初っから表示されてしまうのを防ぐためです。

<input type="text" name="name" placeholder="ダブルクリックしてください" list="sample1">
<datalist id="sample1">
<option value="リスト項目1"><!--この間にテキストを入れちゃダメ--></option>
<option value="リスト項目2"></option>
<option value="リスト項目3"></option>
</datalist>

前回の<select>要素と同じように <option>要素を使うのですが、
こっちは<option>〜</option>の間にテキストは入ちゃダメって、ややこしいですね。

未対応ブラウザへの対策＿2件

●サンプル2
<datalist>〜</datalist> の中に <select>要素を入れることで、未対応のブラウザでも選択してもらうことができます。
<datalist>に対応したブラウザでは<select>要素が表示されず、未対応ブラウザでは<select>要素で選択できるようになります。

リストの表示は <select>内の <option> 〜 </option> 間のテキストですが、実際に選択されるのは <option>の value属性の値です。
HTMLはこちら。<select>要素の併用で 未対応ブラウザでも選択可能になります。

<input type="text" name="name" placeholder="ダブルクリックしてください" list="sample2">
<datalist id="sample2">
<select name="name">
  <option value="choice1">選択肢1</option>
  <option value="choice2">選択肢2</option>
  <option value="choice3">選択肢3</option>
  <option value="choice4">選択肢4</option>
  <option value="choice5">選択肢5</option>
</select>
</datalist>

●サンプル3
同じく未対応のブラウザ対策で、<datalist>〜</datalist>の中に、テキストなどの代替コンテンツを入れる事もできます。
<datalist>に対応したブラウザではこの内容が表示されず、未対応ブラウザでは表示されます。

HTMLはこちら ↓ ハイライト部分が代替コンテンツです。

<input type="text" name="name" placeholder="ダブルクリックしてください" list="sample2" size="30">
<datalist id="sample2-2">
  <option value="http://www.google.co.jp/"></option>
  <option value="http://www.yahoo.co.jp/"></option>
  <option value="http://www.rakuten.co.jp/"></option>
★次の3つから選んでください。<br>
http://www.google.co.jp/<br>
http://www.yahoo.co.jp/<br>
http://www.rakuten.co.jp/<br>
</datalist>

これ、<form>の中に置かなくてもOK

<datalist>要素は、<form>要素の中に入っていなくても良いんですって。
<input>の list属性で<datalist>要素の id名を呼び出すから。
同じ理由で、1つの<datalist>を複数の<input>で利用することも可能です。

●サンプル4
このサンプルでは、2つの<input>要素（type="search" と type="text" ）で同じ<datalist>を共有しています。
また、このサンプルでは <datalist>を<form>の外に出しています。

支店を検索する :

ご利用中の支店 :

HTMLはこちら ↓

<form>
<p>支店を検索する :
<input type="search" name="Serch" placeholder="ダブルクリックしてください" list="sample3">
 <input type="submit" value="検索">
</p>
<p>ご利用中の支店 :
<input type="text" name="mybranch" placeholder="ダブルクリックしてください" list="sample3">
<input type="submit" value="送信">
</p>
</form>
<!-- ↓ 出てる -->
<datalist id="sample3">
<option value="新宿支店"></option>
<option value="渋谷支店"></option>
<option value="恵比寿支店"></option>
<option value="品川支店"></option>
</datalist>

label属性を使ってみた例

<option>要素に label属性を使うこともできます。
label属性の値が表示用に、入力フィールドへの挿入には value属性の値が使われる、はずですが、ブラウザによってはどっちも表示されるようです。
いずれにしても、入力フィールドに入るのは value属性の値です。

●サンプル5

ご利用中の支店 :

HTMLはこちら ↓

<p>ご利用中の支店 :
<input type="text" name="mybranch" placeholder="ダブルクリックしてください" list="sample4">
<input type="submit" value="送信">
</p>
<datalist id="sample4">
<option value="新宿支店" label="新宿">
<option value="渋谷支店" label="渋谷">
<option value="恵比寿支店" label="恵比寿">
<option value="品川支店" label="品川">
</datalist>

次回予告

次回は「複数行のテキストフィールド」を作る <textarea>要素です。
<input>要素では1行用のテキストフィールドを作りましたが、
<textarea>要素は、「文章」を入力するため、高さ（行数）があるテキストフィールドになります。