欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-11-09 10:26:38
在日常的页面制作中,为了方便用户输入,经常可以在一个输入文本框中,当用户输入 内容时,自动下拉提示建议用户的输入,这叫autocomplete或者autosuggestion功能, 这样能加快用户的...

在日常的页面制作中,为了方便用户输入,经常可以在一个输入文本框中,当用户输入
内容时,自动下拉提示建议用户的输入,这叫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版本下一直都有的,这个赞扬一个,而其他版本浏览器
对其兼容情况,可以参考这个地址:



摘自 jackyrong