HTML5中如何使用<datalist>标签

这篇文章主要介绍了HTML5中如何使用

成都创新互联是专业的浮山网站建设公司，浮山接单;提供成都网站制作、成都做网站、外贸营销网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行浮山网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

HTML5

datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

请使用 input 元素的 list 属性来绑定 datalist。

HTML5

AlternatingItemStyle获取 DataList 控件中交替项的样式属性。

AlternatingItemTemplate获取或设置 DataList 中交替项的模板Attributes获取web控件的所有属性值.

BackColor获取或设置 Web 服务器控件的背景色。

BorderColor获取或设置 Web 控件的边框颜色。

BorderStyle获取或设置 Web 服务器控件的边框样式。

BorderWidth获取或设置 Web 服务器控件的边框宽度。

CellPadding获取或设置单元格的内容和单元格的边框之间的空间量。

CellSpacing获取或设置单元格间的空间量。

Controls列表控件中的子控件的集合.

DataKeyField获取或设置由 DataSource 属性指定的数据源中的键字段。

DataKeys存储数据列表控件中每个记录的键值（显示为一行）。

DataMember获取或设置多成员数据源中要绑定到数据列表控件的特定数据成员。

DataSource获取或设置源，该源包含用于填充控件中的项的值列表。

EditItemIndex获取或设置 DataList 控件中要编辑的选定项的索引号。

EditItemStyle获取 DataList 控件中为进行编辑而选定的项的样式属性。

EditItemTemplate获取或设置 DataList 控件中为进行编辑而选定的项的模板。

Enable获取或设置一个值，该值指示是否启用 Web 服务器控件。

HeaderTemplate获取或设置 DataList 控件的标题部分的模板。

Height获取或设置

HTML

下面是一个 input 元素，datalist 中描述了其可能的值：

我发现HTML5

最近做东西需要邮箱补全，接触到datalist，觉得蛮好用的。datalist是需要与input标签配合使用，可以用在输入推荐，邮箱补全等场合。下面将简单记录相关用法。

1.HTML5

请输入您最喜欢的科目：

datalist的id需要与input的list属性一致，当准备输出时input下方会自动出现option的选项，datalist具有模糊查询的作用，比如在文本框中输入“路”，则推荐的内容为电路原理，数字电路以及模拟电路。

2.HTML5

html代码：

请输入您的邮箱：

js代码：

function suggestEmail(){
var email = $("#emailInput").val();
$("#mylist2").empty();
if(email.indexOf("@")>-1){
return false;
}else{
$("#mylist2").append(""+
""+
""+
""+
"")
}
}

input标签的oninput属性可以检测到input内容的变化，当输入框内容变化，出发js在datalist中追加option。如果用户手动输入了@，就不需要提示了。

HTML 4.01 与 HTML 5 之间的差异：

浏览器支持：

所有主流浏览器都支持

感谢你能够认真阅读完这篇文章，希望小编分享HTML5中如何使用