在日常的页面制作中,为了方便用户输入,经常可以在一个输入文本框中,当用户输入
内容时,自动下拉提示建议用户的输入,这叫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://caniuse.com/#feat=datalist
1 楼
hellostory
2012-05-03
你这样做,是将代码写死!假如一千个客户名单,你是否要一次性全部加载到<dataList>?请问光靠<datalist>而不用Ajax或DWR,你是如何实现下拉提示动态更新的?
2 楼
jackyrong
2012-05-03
hellostory 写道
你这样做,是将代码写死!假如一千个客户名单,你是否要一次性全部加载到<dataList>?请问光靠<datalist>而不用Ajax或DWR,你是如何实现下拉提示动态更新的?
你的问题十分好,示例代码只是讲解HTML5的新特性datalist而已,而实际上,如果是少量内容可以用datalist,大量内容的建议还是用DWR或其他AJAX方法
3 楼
hellostory
2012-05-03
jackyrong 写道
hellostory 写道
你这样做,是将代码写死!假如一千个客户名单,你是否要一次性全部加载到<dataList>?请问光靠<datalist>而不用Ajax或DWR,你是如何实现下拉提示动态更新的?
你的问题十分好,示例代码只是讲解HTML5的新特性datalist而已,而实际上,如果是少量内容可以用datalist,大量内容的建议还是用DWR或其他AJAX方法
恩,有点小激动~
4 楼
yuanye218
2012-05-14
各取所需,根据情况选择适合自己的方案,没有万能的。