datalist(資料列表)元素
要實現這個功能，首先要建立一個標籤和輸入。
label for="goddess">你的女神是誰？</label>
<input type="text" id="goddess" name="goddess">
複製程式碼接下來，建立一個datalist列表元素。
在其中，為每個自動完成的選擇新增一個 option 元素。使用上面的示例，我們將為每個女神建立一個選項。
<label for="goddess">你的女神是誰？</label>
<input type="text" id="goddess" name="goddess">
<datalist>
<option>關曉彤</option>
<option>柳巖</option>
<option>王鷗</option>
<option>鬼鬼</option>
<option>潘曉婷</option>
</datalist>
複製程式碼最後，我們需要將 datalist 與 input 關聯。為 datalist 提供一個ID，並將 list 屬性新增到您的輸入中，其值等於您的datalist ID。
<label for="goddess">你的女神是誰？</label>
<input type="text" id="goddess" name="goddess" list="goddess-list">
<datalist id="goddess-list">
<option>關曉彤</option>
<option>柳巖</option>
<option>王鷗</option>
<option>鬼鬼</option>
<option>潘曉婷</option>
</datalist>
複製程式碼現在，當使用者鍵入內容時，瀏覽器將顯示一個可供選擇的選項列表
最終效果
瀏覽器相容性
datalist元素可在所有現代瀏覽器中使用
關注公眾號，第一時間接收最新文章。如果對你有一點點幫助，可以點喜歡點贊點收藏，還可以小額打賞作者，以鼓勵作者寫出更多更好的文章
現在關注還送某網精品視訊課程網盤資料啊，準能為你節省不少錢！