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

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

  这样的代码运行后，当用户在文本输入框输入内容时，就会下拉提示三种水果，
建议用户输入，如果担心浏览器兼容问题，可以尝试用如下代码：
Java代码    
1.  
2. datalist id="fruits">   
3.   Pick your favorite fruit  
4.   select name="fruit_sel">   
5.   option value="Apple"> Apple/option>    
6.   option value="Orange"> Orange/option>    
7.   option value="Peach"> Peach/option>    
8.   /select>   
9.   or type one.  
10. /datalist>   
11. input type="text" name="fruit" value="" list="fruits" />  

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

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

  这样的代码运行后，当用户在文本输入框输入内容时，就会下拉提示三种水果，
建议用户输入，如果担心浏览器兼容问题，可以尝试用如下代码：
Java代码    
1.  
2. datalist id="fruits">   
3.   Pick your favorite fruit  
4.   select name="fruit_sel">   
5.   option value="Apple"> Apple/option>    
6.   option value="Orange"> Orange/option>    
7.   option value="Peach"> Peach/option>    
8.   /select>   
9.   or type one.  
10. /datalist>   
11. input type="text" name="fruit" value="" list="fruits" />  

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

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！