脚本宝典收集整理的这篇文章主要介绍了html5教程-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

摘自 jackyrong

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

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-html5中新的datalist自动下拉提示输入框全部内容，希望文章能够帮你解决html5教程-html5中新的datalist自动下拉提示输入框所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。