日期:2014-05-17  浏览次数:20577 次

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
1 楼 hellostory 2012-05-03  
你这样做,是将代码写死!假如一千个客户名单,你是否要一次性全部加载到<dataList>?请问光靠<datalist>而不用Ajax或DWR,你是如何实现下拉提示动态更新的?
2 楼 jackyrong 2012-05-03  
hellostory 写道
你这样做,是将代码写死!假如一千个客户名单,你是否要一次性全部加载到<dataList>?请问光靠<datalist>而不用Ajax或DWR,你是如何实现下拉提示动态更新的?


你的问题十分好,示例代码只是讲解HTML5的新特性datalist而已,而实际上,如果是少量内容可以用datalist,大量内容的建议还是用DWR或其他AJAX方法
3 楼 hellostory 2012-05-03  
jackyrong 写道
hellostory 写道
你这样做,是将代码写死!假如一千个客户名单,你是否要一次性全部加载到<dataList>?请问光靠<datalist>而不用Ajax或DWR,你是如何实现下拉提示动态更新的?


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


恩,有点小激动~
4 楼 yuanye218 2012-05-14  
各取所需,根据情况选择适合自己的方案,没有万能的。