HTML 入力欄に入力候補を表示する(datalist)

サンプル	入力候補を表示する
	datalist要素

入力候補を表示する

１．入力欄に「あ」と入力すると、入力候補に「あいうえお」が表示されます。
２．入力欄が空白の状態で右の三角をクリックすると入力候補の一覧が表示されます。

上記サンプルのコードです。

<body>
<input type="text" list="list1">

<datalist id="list1">
	<option value="あいうえお"></option>
	<option value="かきくけこ"></option>
	<option value="さしすせそ"></option>
	<option value="たちつてと"></option>
</datalist>
<body>

2行目は、テキストボックスです。
5行目から8行目が、入力候補です。
4行目のid属性のlist1は、2行目のinput要素(テキストボックス)のlist属性と紐付いています。

datalist要素

入力候補を、datalistタグでくくります。<datalist>～</datalist>。
datalistタグのid属性が、input要素のlist属性と紐付きます。
入力候補は、option要素で記述します。
以下はMDNのdatalist要素のリンクです。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/datalist