元素介绍
想象一下我们想要用户输入一个字符串，例如他们的名字，我们可能会用到<input type="text"/>元素，这样子用户就可以随意的输入他们的内容。想象一下假如我们需要用户输入的是他们的国家居住地，我们更喜欢使用<select>元素，这个将会限制可选的结果（有时候也许是好的），并且还存在着一个潜在的巨大用户选择。
但如果我们想要用户自由输入的同时又有一些建议选项，这里就是<datalist>的用处了。
示例代码
datalist包含<option>元素，类似于<select>元素，然而<datalist>并不是独立控制，相反它是附加在<input type="text"/>上的list，类似于下面的这段代码：
<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>这段代码里面使用到了<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属性
<label>Select your preferred code editor:</label>
<input type="text" id="txt_ide" list="ide" />
<datalist id="ide">
<option value="Brackets" label="by Adobe" />
<option value="Coda" label="by Panic" />
<option value="Dreamweaver" />
<option value="Espresso" />
<option value="jEdit" />
<option value="Komodo Edit" />
<option value="Notepad++" />
<option value="Sublime Text 2" label="the developer'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>
兼容性
支持最新IE10、Firefox、Chrome和Opera，不支持IOS和Android，你可以在这里查看最新支持：canIUse
更多资源
- Polyfill for Datalist by Chris Coyier
- Draft Specification on W3C
- Browser Support on caniuse.com
