HTML datalist瞭解一下，使用它建立自動完成輸入女神小例子

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元素可在全部現代瀏覽器中使用

---

關注公衆號，第一時間接收最新文章。若是對你有一點點幫助，能夠點喜歡點贊點收藏，還能夠小額打賞做者，以鼓勵做者寫出更多更好的文章。

如今關注還送某網精品視頻課程網盤資料啊，準能爲你節省很多錢！