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" 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。如果用户手动输入了@，就不需要提示了。以下是效果图：

附件！