html5中datalist简单用法

原创 2015年11月19日 23:39:58

学习前端半个月了,越来越觉得前端太有趣了,今后将在博文中记录自己学习的点滴,毕竟好记性不如烂笔头嘛。

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

1.用在输入推荐上:

	<p>请输入您最喜欢的科目:</p>
	<input type="text" list="mylist1">
		<datalist id="mylist1">
			<option value="电路原理">
			<option value="数字电路">
			<option value="模拟电路">
			<option value="计算机原理">
		</datalist>
	</br>

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

2.用在邮箱补全上:

html代码:

	<p>请输入您的邮箱:</p>
	<input id="emailInput" oninput="suggestEmail()" type="text" list="mylist2">
		<datalist id="mylist2"></datalist>

js代码:
function suggestEmail(){
	var email = $("#emailInput").val();
	$("#mylist2").empty();
	if(email.indexOf("@")>-1){
		return false;
	}else{
		$("#mylist2").append("<option value='"+ email +"@qq.com'>"+
						"<option value='"+ email +"@126.com'>"+
						"<option value='"+ email +"@foxmail.com'>"+
						"<option value='"+ email +"@163.com'>"+
						"<option value='"+ email +"@gmail.com'>")
	}
}

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


附件!

html5 datalist 选中option选项后的触发事件

使用input + datalist 实现自动补全功能,其中datalist中的内容是根据input输入的内容动态变换的,代码如下 function inputSelect(){ var...
  • qishuixian
  • qishuixian
  • 2017年11月02日 18:35
  • 915

Datalist控件的详细用法(一)

使用DataList控件   本章内容:          1、理解事件冒泡          2、使用模板          3、在DataList中显示数据          4、在Dat...
  • liuwei1128
  • liuwei1128
  • 2014年03月14日 21:34
  • 3097

datalist

在Web设计中,经常会用到如输入框的自动下拉提示,这将大大方便用户的输入。在以前,如果要实现这样的功能,必须要求开发者使用一些Javascript的技巧或相关的框架进行ajax调用,需要一定的编程工作...
  • qi1271199790
  • qi1271199790
  • 2017年01月16日 15:09
  • 431

每天一道前端面试题--dataList与自定义dataList

今天主要分享 —- HTML5新控件datalist以及模仿天猫搜索框HTML新控件datalist的实际应用 ...
  • dai_qingyun
  • dai_qingyun
  • 2016年10月19日 10:04
  • 1494

<datalist>标签实现提示功能

一个关于在HTML5才有的新标签学习
  • chenlinwei5
  • chenlinwei5
  • 2017年01月14日 20:52
  • 545

form表单 input标签以及其属性,datalist标签

form表单 input标签以及其属性 datalist标签
  • ztt0918
  • ztt0918
  • 2017年03月26日 20:55
  • 696

DataList控件详细用法(一)

使用DataList控件  本章内容:         1、理解事件冒泡         2、使用模板         3、在DataList中显示数据         4、在DataList中创建多...
  • ranlianjie
  • ranlianjie
  • 2007年05月20日 18:02
  • 8621

Html5之datalist-自动匹配的的表单输入

datalist是Html5新增的标签,主要用于自动匹配表单的可能的输入datalist将用户可能输入的值,放在option列表里,当用户在对应的表单输入的时候,可以根据输入的关键字自动匹配optio...
  • sinat_32290679
  • sinat_32290679
  • 2017年09月19日 10:44
  • 110

Html5 中的datalist用法

datalist 标签定义选项列表,与input元素配合使用该元素,来定义input可能的值datalist及其选项不会被显示出来,它仅仅是合法的输入值列表 ...
  • sinat_36422236
  • sinat_36422236
  • 2016年11月07日 10:08
  • 415

H5 -input datalist属性

最近一段时间,领导总是谈到一个话题,select的适用性问题。包含两点:数据大的时候实现搜索操作;多选问题(依然要用插件解决)。          H5目前主要应用在移动端,web由于浏览器太多,兼...
  • G100AVIN
  • G100AVIN
  • 2016年09月07日 16:50
  • 1900
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5中datalist简单用法
举报原因:
原因补充:

(最多只允许输入30个字)