关闭

html5中datalist简单用法

标签: html5datalist邮箱补全
1600人阅读 评论(0) 收藏 举报
分类:

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

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


附件!

0
1

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1611次
    • 积分:25
    • 等级:
    • 排名:千里之外
    • 原创:1篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档
    阅读排行