html5 中新的datalist 自动下拉提示输入框

  在日常的页面制作中，为了方便用户输入，经常可以在一个输入文本框中，当用户输入
内容时，自动下拉提示建议用户的输入，这叫autocomplete或者autosuggestion功能，
这样能加快用户的输入，目前的做法是通过ajax去实现，比如通过DWR等，这方面
的资料很多的。
   而HTML5中，新增加了datalist这个标签，其实也是可以满足在前端达到
同样的功能，例子如下：
  

<input type="text" value="" list="fruits" />
<datalist id="fruits">
  <option value="Apple"></option> 
  <option value="Orange"></option> 
  <option value="Peach"></option> 
</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" />

   但这个情况下，记得服务端要同时捕捉fruits和fruit_sel两个参数了
  datalist在firefox版本下一直都有的，这个赞扬一个，而其他版本浏览器
对其兼容情况，可以参考这个地址：
http://caniuse.com/#feat=datalist

评论

4 楼 yuanye218 2012-05-14  

各取所需，根据情况选择适合自己的方案，没有万能的。

3 楼 hellostory 2012-05-03  

jackyrong 写道

hellostory 写道

你这样做，是将代码写死！假如一千个客户名单，你是否要一次性全部加载到<dataList>？请问光靠<datalist>而不用Ajax或DWR，你是如何实现下拉提示动态更新的？

你的问题十分好，示例代码只是讲解HTML5的新特性datalist而已，而实际上，如果是少量内容可以用datalist，大量内容的建议还是用DWR或其他AJAX方法

恩，有点小激动~

2 楼 jackyrong 2012-05-03  

hellostory 写道

你这样做，是将代码写死！假如一千个客户名单，你是否要一次性全部加载到<dataList>？请问光靠<datalist>而不用Ajax或DWR，你是如何实现下拉提示动态更新的？

你的问题十分好，示例代码只是讲解HTML5的新特性datalist而已，而实际上，如果是少量内容可以用datalist，大量内容的建议还是用DWR或其他AJAX方法

1 楼 hellostory 2012-05-03  

你这样做，是将代码写死！假如一千个客户名单，你是否要一次性全部加载到<dataList>？请问光靠<datalist>而不用Ajax或DWR，你是如何实现下拉提示动态更新的？