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


在日常的页面制作中，为了方便用户输入，经常可以在一个输入文本框中，当用户输入内容时，自动下拉提示建议用户的输入，这叫autocomplete或者autosuggestion功能，这样能加快用户的输入，目前的做法是通过ajax去实现，比如通过DWR等，这方面的资料很多的。

而HTML5中，新增加了datalist这个标签，其实也是可以满足在前端达到同样的功能，例子如下：

  1. <input type="text" value="" list="fruits" />   
  2. <datalist id="fruits">   
  3.   <option value="Apple"></option>    
  4.   <option value="Orange"></option>    
  5.   <option value="Peach"></option>    
  6. </datalist>  

这样的代码运行后，当用户在文本输入框输入内容时，就会下拉提示三种水果， 建议用户输入，如果担心浏览器兼容问题，可以尝试用如下代码：

  1. <datalist id="fruits">   
  2.   Pick your favorite fruit   
  3.   <select name="fruit_sel">   
  4.   <option value="Apple">Apple</option>    
  5.   <option value="Orange">Orange</option>    
  6.   <option value="Peach">Peach</option>    
  7.   </select>   
  8.   or type one.   
  9. </datalist>   
  10. <input type="text" name="fruit" value="" list="fruits" />  
但这个情况下，记得服务端要同时捕捉fruits和fruit_sel两个参数了
 datalist在firefox版本下一直都有的，这个赞扬一个，而其他版本浏览器对其兼容情况。

相关内容