HTML5中如何使用<datalist>標簽

這篇文章主要介紹了HTML5中如何使用<datalist>標簽，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

HTML5<datalist>標簽的定義和用法：

<datalist> 標簽定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。

datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

請使用 input 元素的 list 屬性來綁定 datalist。

HTML5<datalist>標簽屬性和說明：

AlternatingItemStyle獲取 DataList 控件中交替項的樣式屬性。

AlternatingItemTemplate獲取或設置 DataList 中交替項的模板Attributes獲取web控件的所有屬性值.

BackColor獲取或設置 Web 服務器控件的背景色。

BorderColor獲取或設置 Web 控件的邊框顏色。

BorderStyle獲取或設置 Web 服務器控件的邊框樣式。

BorderWidth獲取或設置 Web 服務器控件的邊框寬度。

CellPadding獲取或設置單元格的內容和單元格的邊框之間的空間量。

CellSpacing獲取或設置單元格間的空間量。

Controls列表控件中的子控件的集合.

DataKeyField獲取或設置由 DataSource 屬性指定的數據源中的鍵字段。

DataKeys存儲數據列表控件中每個記錄的鍵值（顯示為一行）。

DataMember獲取或設置多成員數據源中要綁定到數據列表控件的特定數據成員。

DataSource獲取或設置源，該源包含用于填充控件中的項的值列表。

EditItemIndex獲取或設置 DataList 控件中要編輯的選定項的索引號。

EditItemStyle獲取 DataList 控件中為進行編輯而選定的項的樣式屬性。

EditItemTemplate獲取或設置 DataList 控件中為進行編輯而選定的項的模板。

Enable獲取或設置一個值，該值指示是否啟用 Web 服務器控件。

HeaderTemplate獲取或設置 DataList 控件的標題部分的模板。

Height獲取或設置

HTML <datalist> 標簽實例：

下面是一個 input 元素，datalist 中描述了其可能的值：

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

我發現HTML5<datalist>標簽的兩點具體用處，分享給大家：

最近做東西需要郵箱補全，接觸到datalist，覺得蠻好用的。datalist是需要與input標簽配合使用，可以用在輸入推薦，郵箱補全等場合。下面將簡單記錄相關用法。

1.HTML5<datalist>標簽用在輸入推薦上：

<p>請輸入您最喜歡的科目：</p>
<input type="text" list="mylist1">
<datalist id="mylist1">
<option value="電路原理">
<option value="數字電路">
<option value="模擬電路">
<option value="計算機原理">
</datalist>
</br>

datalist的id需要與input的list屬性一致，當準備輸出時input下方會自動出現option的選項，datalist具有模糊查詢的作用，比如在文本框中輸入“路”，則推薦的內容為電路原理，數字電路以及模擬電路。

2.HTML5<datalist>標簽用在郵箱補全上：

html代碼：

<p>請輸入您的郵箱：</p>
<input id="emailInput" oninput="suggestEmail()" type="text" list="mylist2">
<datalist id="mylist2"></datalist>

js代碼：

function suggestEmail(){
var email = $("#emailInput").val();
$("#mylist2").empty();
if(email.indexOf("@")>-1){
return false;
}else{
$("#mylist2").append("<option value='"+ email +"@qq.com'>"+
"<option value='"+ email +"@126.com'>"+
"<option value='"+ email +"@foxmail.com'>"+
"<option value='"+ email +"@163.com'>"+
"<option value='"+ email +"@gmail.com'>")
}
}

input標簽的oninput屬性可以檢測到input內容的變化，當輸入框內容變化，出發js在datalist中追加option。如果用戶手動輸入了@，就不需要提示了。

HTML 4.01 與 HTML 5 之間的差異：

<datalist> 標簽是 HTML 5 中的新標簽。

瀏覽器支持：

所有主流瀏覽器都支持 <datalist> 標簽，除了 Internet Explorer 和 Safari。

感謝你能夠認真閱讀完這篇文章，希望小編分享HTML5中如何使用<datalist>標簽內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!