在日常的页面制作中,为了方便用户输入,经常可以在一个输入文本框中,当用户输入
内容时,自动下拉提示建议用户的输入,这叫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
分享到:
相关推荐
HTML5新增的标签datalist实现输入中文/拼音首字母时,自动进入数据库模糊查询,并返回相应的结果,生成datalist,由于在输入框中的输入内容发生变化时,datalist会自动触发下拉框,解决方案非常好,下面通过本文给...
使用datalist、bootstrap和jQuery制作下拉输入框,支持模糊查询,html & javascript & css
datalist元素用于定义输入框的选项列表,列表通过datalist内的option元素进行创建。如果用户不希望从列表中选择某项,也可以自行输入其他内容。 描述 语法格式 <datalist id="cars"> 值"> 值"> 值"> </datalist> ...
本文给大家分享的是使用jQuery实现的房HTML5中的一个好看的input框很好看的下拉列表--datalist,兼容性非常不错,这里推荐给大家,有需要的小伙伴可以参考下。
HTML5时代则不用了,直接使用datalist标签,直接减少了工作量。如下 复制代码代码如下:<!DOCTYPE html><html> <head> <title>HTML5 datalist tag</title> <meta charset=”utf-8″>...
一般我们通常使用select制作下拉菜单,但是H5之后,datalist也可以充当select的角色,而且两者还有一点小的不同。 对于select来说,select的下拉菜单是供用户选择的,用户只能选择其中的选项不能自己添加。 但是...
datalist 中嵌套datalist,纯文本格式,非常小·
一个DataList 嵌套DataList的例子,希望对各位有帮助。
在DataList里编辑和删除数据 在DataList里编辑和删除数据
DataList用法DataList用法DataList用法DataList用法DataList用法DataList用法DataList用法DataList用法DataList用法
html 下拉列表 联动选择 展示数据Demo 类似可以实现地址选择
使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下 <!DOCTYPE HTML> <html> <body> [removed][removed] [removed] function inputSelect(){ ...
简述html中datalist的一些简单应用场景以及示例。
DataList 分页源码 DataList 分页源码 DataList 分页源码 DataList 分页源码
本影片中Datalist包含DataList,大类别包含小类别以及程式重构.片长:0:43:48; 大小:17088KB
DataList基本的用法,其中包括编辑、删除、添加、更新、取消等基本操作的代码示例,另外还使用PagedataSource来实现了数据的分页。
DataList分页的问题