Google Chrome Canary 已嵌入 datalist

       当用户在填写表单时，有时候是个麻烦的过程。使用更多的选择让用户有个更好的体验是非常重要的，chrome canary中嵌入的datalist元素就能让用户在填写表单的时候更加轻松便捷。

       通过使用datalist，你的应用能定义一系列的结果让用户选择。不仅可以按选项选择，还可以任意填写内容。

       下面是一个demo：

       http://demo.agektmr.com/datalist/

      通过指定input元素的属性值，可以快速关联到datalist：

<input type="text" value="" list="fruits" />
<datalist id="fruits">
  <option value="Apple"></option> 
  <option value="Orange"></option> 
  <option value="Peach"></option> 
</datalist>

datalist已经能适用于最新的火狐，opera以及IE 10.所以你不用担心要做太多的测试比较。不过你想进一步确认浏览器能正常运行datalist，可以做以下测试：

<datalist id="fruits">
  Pick your favorite fruit
  <select name="fruit_sel">
  <option value="Apple">Apple</option> 
  <option value="Orange">Orange</option> 
  <option value="Peach">Peach</option> 
  </select>
  or type one.
</datalist>
<input type="text" name="fruit" value="" list="fruits" />

       如果你的浏览器能实现datalist，所有在datalist 选项将被隐藏。当input取得焦点时将能以列表形式显现：

       如果你想使用这样的回退机制，确认你的服务器能捕捉到“fruit_sel” and “fruit”查询参数。