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://www.heiqu.com/psgdw.html