http://caibaojian.com/datalist.html
元素介紹
想象一下我們想要用戶輸入一個字符串，例如他們的名字，我們可能會用到<input type="text"/>元素，這樣子用戶就可以隨意的輸入他們的內容。想象一下假如我們需要用戶輸入的是他們的國家居住地，我們更喜歡使用<select>元素，這個將會限制可選的結果（有時候也許是好的），並且還存在着一個潛在的巨大用戶選擇。
但如果我們想要用戶自由輸入的同時又有一些建議選項，這里就是<datalist>的用處了。
示例代碼
datalist包含<option>元素，類似於<select>元素，然而<datalist>並不是獨立控制，相反它是附加在<input type="text"/>上的list，類似於下面的這段代碼：
<body> <label>Select your preferred code editor:</label> <input type="text" id="txt_ide" list="ide" /> <datalist id="ide"> <option value="Brackets" /> <option value="Coda" /> <option value="Dreamweaver" /> <option value="Espresso" /> <option value="jEdit" /> <option value="Komodo Edit" /> <option value="Notepad++" /> <option value="Sublime Text 2" /> <option value="Taco HTML Edit" /> <option value="Textmate" /> <option value="Text Pad" /> <option value="TextWrangler" /> <option value="Visual Studio" /> <option value="VIM" /> <option value="XCode" /> </datalist> </body>
這段代碼里面使用到了<input type="text"/>控制着一個list的新屬性，這是告訴瀏覽器加載一個id為上面list的值的這個列表值或者來自datalist的建議。
根據官方W3C的文檔，datalist還可以用於下面這些
<input type="text" /><input type="url" /><input type="tel" /><input type="color" />- Data & Time (including Month etc.), Range and more.
更多的屬性
我們還可以給它的option添加一個label屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <label>Select your preferred code editor:</label> <input type="text" id="txt_ide" list="ide" /> <datalist id="ide"> <option value="Brackets" /> <option value="Coda" /> <option value="Dreamweaver" /> <option value="Espresso" /> <option value="jEdit" /> <option value="Komodo Edit" /> <option value="Notepad++" /> <option value="Sublime Text 2" label="the develpoer's choice" /> <option value="Taco HTML Edit" /> <option value="Textmate" /> <option value="Text Pad" /> <option value="TextWrangler" /> <option value="Visual Studio" /> <option value="VIM" /> <option value="XCode" /> </datalist> </body> </html>
兼容性
支持最新IE10、Firefox、Chrome和Opera，不支持ios和Android，你可以在這里查看最新支持：canIUse
原文鏈接：HTML5 元素 datalist 介紹 版權所有，轉載時請注明出處，違者必究。
注明出處格式：前端開發博客 (http://caibaojian.com/datalist.html)