html5中datalist简单用法

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

最近做东西需要邮箱补全，接触到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" οninput="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。如果用户手动输入了@，就不需要提示了。以下是效果图：

附件！