首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

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

2012-08-26 
html5 中新的datalist 自动下拉提示输入框在日常的页面制作中,为了方便用户输入,经常可以在一个输入文本框

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


  这样的代码运行后,当用户在文本输入框输入内容时,就会下拉提示三种水果,
建议用户输入,如果担心浏览器兼容问题,可以尝试用如下代码:

   但这个情况下,记得服务端要同时捕捉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   各取所需,根据情况选择适合自己的方案,没有万能的。

热点排行