試一試
<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />
<datalist id="ice-cream-flavors">
<option value="Chocolate"></option>
<option value="Coconut"></option>
<option value="Mint"></option>
<option value="Strawberry"></option>
<option value="Vanilla"></option>
</datalist>
label {
display: block;
margin-bottom: 10px;
}
要將 <datalist> 元素繫結到控制元件上，我們要在 id 屬性中為其指定一個唯一的識別符號，然後在 <input> 元素中新增 list 屬性，其值與該識別符號相同。只有特定型別的 <input> 支援此行為，並且其表現也可能因瀏覽器而異。
每個 <option> 元素都應有一個 value 屬性，它代表一個建議輸入到輸入框中的值。它還可以有一個 label 屬性，或者在沒有該屬性時，可以有一些文字內容，瀏覽器可能會顯示這些內容來代替 value（Firefox），或者作為 value 的補充文字（Chrome 和 Safari）。下拉選單的確切內容取決於瀏覽器，但當被點選時，輸入到控制元件欄位中的內容將始終來自 value 屬性。
注意： <datalist> 不能替代 <select>。<datalist> 本身並不代表一個輸入；它是一個為關聯控制元件提供建議值的列表。該控制元件仍然可以接受任何透過驗證的值，即使該值不在建議列表中。
屬性
此元素除了全域性屬性（所有元素通用）外，沒有其他屬性。
無障礙
在決定使用 <datalist> 元素時，請注意以下一些無障礙性問題：
- 資料列表選項的字型大小不會縮放，始終保持相同大小。當其餘內容放大或縮小時，自動建議的內容不會變大或變小。
- 由於使用 CSS 來定位選項列表非常有限甚至不存在，因此無法為高對比度模式設定渲染樣式。
- 一些螢幕閱讀器/瀏覽器組合，包括 NVDA 和 Firefox，不會播報自動建議彈出視窗的內容。
示例
文字型別
當用戶點選或雙擊控制元件時，text、search、url、tel、email 和 number 型別中的建議值會顯示在下拉選單中。通常，控制元件的右側也會有一個箭頭，指向存在預定義值。
<label for="myBrowser">Choose a browser from this list:</label>
<input list="browsers" id="myBrowser" name="myBrowser" />
<datalist id="browsers">
<option value="Chrome"></option>
<option value="Firefox"></option>
<option value="Opera"></option>
<option value="Safari"></option>
<option value="Microsoft Edge"></option>
</datalist>
日期和時間型別
month、week、date、time 和 datetime-local 型別可以顯示一個介面，方便使用者選擇日期和時間。預定義的值可以顯示在其中，讓使用者快速填充控制元件值。
注意：當不支援這些型別時，將渲染一個基本的 text 型別，建立一個文字欄位。該欄位將正確識別建議值，並以下拉選單的形式向用戶顯示。
<input type="time" list="popularHours" />
<datalist id="popularHours">
<option value="12:00"></option>
<option value="13:00"></option>
<option value="14:00"></option>
</datalist>
範圍型別
當與 range 輸入型別關聯的資料列表的 <option> 元素中包含 value 屬性時，它們將顯示為一系列刻度標記，使用者可以輕鬆選擇。
<label for="tick">Tip amount:</label>
<input type="range" list="tickmarks" min="0" max="100" id="tick" name="tick" />
<datalist id="tickmarks">
<option value="0" label="0%"></option>
<option value="10" label="Minimum Tip"></option>
<option value="20" label="Standard"></option>
<option value="30" label="Generous"></option>
<option value="50" label="Very Generous"></option>
</datalist>
注意： label 屬性旨在為刻度標記提供標籤，如 HTML 標準中所定義。然而，目前瀏覽器的支援情況各不相同；標籤可能不會在視覺上或作為工具提示顯示。
顏色型別
color 型別可以在瀏覽器提供的介面中顯示預定義的顏色。
<label for="colors">Pick a color (preferably a red tone):</label>
<input type="color" list="redColors" id="colors" />
<datalist id="redColors">
<option value="#800000"></option>
<option value="#8B0000"></option>
<option value="#A52A2A"></option>
<option value="#DC143C"></option>
</datalist>
技術摘要
規範
| 規範 |
|---|
| HTML # the-datalist-element |
瀏覽器相容性
載入中…