HTML5中如何使用<datalist>標(biāo)簽

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

HTML5<datalist>標(biāo)簽的定義和用法：

<datalist> 標(biāo)簽定義選項(xiàng)列表。請(qǐng)與 input 元素配合使用該元素，來(lái)定義 input 可能的值。

datalist 及其選項(xiàng)不會(huì)被顯示出來(lái)，它僅僅是合法的輸入值列表。

請(qǐng)使用 input 元素的 list 屬性來(lái)綁定 datalist。

HTML5<datalist>標(biāo)簽屬性和說(shuō)明：

AlternatingItemStyle獲取 DataList 控件中交替項(xiàng)的樣式屬性。

AlternatingItemTemplate獲取或設(shè)置 DataList 中交替項(xiàng)的模板Attributes獲取web控件的所有屬性值.

BackColor獲取或設(shè)置 Web 服務(wù)器控件的背景色。

BorderColor獲取或設(shè)置 Web 控件的邊框顏色。

BorderStyle獲取或設(shè)置 Web 服務(wù)器控件的邊框樣式。

BorderWidth獲取或設(shè)置 Web 服務(wù)器控件的邊框?qū)挾取?/p>

CellPadding獲取或設(shè)置單元格的內(nèi)容和單元格的邊框之間的空間量。

CellSpacing獲取或設(shè)置單元格間的空間量。

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

DataKeyField獲取或設(shè)置由 DataSource 屬性指定的數(shù)據(jù)源中的鍵字段。

DataKeys存儲(chǔ)數(shù)據(jù)列表控件中每個(gè)記錄的鍵值（顯示為一行）。

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

DataSource獲取或設(shè)置源，該源包含用于填充控件中的項(xiàng)的值列表。

EditItemIndex獲取或設(shè)置 DataList 控件中要編輯的選定項(xiàng)的索引號(hào)。

EditItemStyle獲取 DataList 控件中為進(jìn)行編輯而選定的項(xiàng)的樣式屬性。

EditItemTemplate獲取或設(shè)置 DataList 控件中為進(jìn)行編輯而選定的項(xiàng)的模板。

Enable獲取或設(shè)置一個(gè)值，該值指示是否啟用 Web 服務(wù)器控件。

HeaderTemplate獲取或設(shè)置 DataList 控件的標(biāo)題部分的模板。

Height獲取或設(shè)置

HTML <datalist> 標(biāo)簽實(shí)例：

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

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

我發(fā)現(xiàn)HTML5<datalist>標(biāo)簽的兩點(diǎn)具體用處，分享給大家：

最近做東西需要郵箱補(bǔ)全，接觸到datalist，覺(jué)得蠻好用的。datalist是需要與input標(biāo)簽配合使用，可以用在輸入推薦，郵箱補(bǔ)全等場(chǎng)合。下面將簡(jiǎn)單記錄相關(guān)用法。

1.HTML5<datalist>標(biāo)簽用在輸入推薦上：

<p>請(qǐng)輸入您最喜歡的科目：</p>
<input type="text" list="mylist1">
<datalist id="mylist1">
<option value="電路原理">
<option value="數(shù)字電路">
<option value="模擬電路">
<option value="計(jì)算機(jī)原理">
</datalist>
</br>

datalist的id需要與input的list屬性一致，當(dāng)準(zhǔn)備輸出時(shí)input下方會(huì)自動(dòng)出現(xiàn)option的選項(xiàng)，datalist具有模糊查詢的作用，比如在文本框中輸入“路”，則推薦的內(nèi)容為電路原理，數(shù)字電路以及模擬電路。

2.HTML5<datalist>標(biāo)簽用在郵箱補(bǔ)全上：

html代碼：

<p>請(qǐng)輸入您的郵箱：</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標(biāo)簽的oninput屬性可以檢測(cè)到input內(nèi)容的變化，當(dāng)輸入框內(nèi)容變化，出發(fā)js在datalist中追加option。如果用戶手動(dòng)輸入了@，就不需要提示了。

HTML 4.01 與 HTML 5 之間的差異：

<datalist> 標(biāo)簽是 HTML 5 中的新標(biāo)簽。

瀏覽器支持：

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享HTML5中如何使用<datalist>標(biāo)簽內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問(wèn)題就找億速云，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!