综述

我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能。现在我们就用jQuery来实现一下。

博主原创代码,如有代码写的不完善的地方还望大家多多指教。

功能简述

  • 填写邮箱名字,出现下拉列表,自动补全邮箱
  • 点击上下按键,选取下拉列表邮箱
  • 按回车键,选中列表内容,隐藏下拉列表
  • 鼠标经过,下拉列表选项设置为高亮
  • 鼠标点击,选中下拉列表选项,隐藏下拉列表

HTML

HTML代码很简单,我们就一个简单的输入框,然后一个ul标签,在内部可以放好多li标签。

<html>
    <head>
        <meta charset="utf-8"/>
        <script src="js/jquery.min.js"></script>
        <script src="js/main.js"></script>
        <link href="css/style.css" rel="stylesheet"/>
    </head>
    <body>
        <div class="content">
           <input type="text" name="email" id="email" placeholder="请输入您的邮箱"/>
           <ul class="list"></ul>
        </div>
    </body>
</html>

  

以上便是HTML代码

CSS

在CSS中,定义也比较简单,其中有一个 lilight 的 class,可以使背景变色,通过 remove 和 add 这个 class,我们可以轻松地实现下拉列表元素是否选中的区分。

CSS所有样式如下

.content input{
	padding:5px 10px;
	width:200px;
}
ul.list{
	list-style:none;
	padding:0px;
	margin:0px;
	overflow:hidden;
}
ul.list li{
	border:1px solid #EEE;
	width:180px;
	padding:5px 10px;
	margin:0px;
	text-overflow:ellipsis;  //溢出时变为省略
	overflow:hidden;
}
.lilight{
	background-color:#fafafa;
}

  

JS

我们引入 jQuery 来实现对元素的操作,实现了按键和鼠标监听,代码如下

$(function(){
		//声明所有的电子邮件变量
		var mail=new Array("sina.com.cn","126.com","163.com","gmail.com","qq.com","vip.qq.com","hotmail.com","sohu.com","139.com","vip.sina.com","cuiqingcai.com");
		//生成一个个li,并加入到ul中
		for(var i=0;i<mail.length;i++){
			var liElement=$("<li class=\"autoli\"><span class=\"ex\"></span><span class=\"at\">@</span><span class=\"tail\">"+mail[i]+"</span></li>");
			liElement.appendTo("ul.list");
		}
		//首先让list隐藏起来
		$("ul.list").hide();

		$("#email").keyup(function(event){
			//键入的内容不是上下箭头和回车
			if(event.keyCode!=38&&event.keyCode!=40&&event.keyCode!=13){
				//如果输入的值不是空或者不以空格开头
				if($.trim($(this).val())!=""&& $.trim($(this).val()).match(/^@/)==null){
					$("ul.list").show();
					//如果当前有已经高亮的下拉选项卡,那么将其移除
					if($("ul.list li:visible").hasClass("lilight")){
						$("ul.list li").removeClass("lilight");
					}
					//如果还存在下拉选项卡,那么将其高亮
					if($("ul.list li:visible")){
						$("ul.list li:visible:eq(0)").addClass("lilight");
					}
				}else{
				//否则不进行显示
					$("ul.list").hide();
					$("ul.list li").removeClass("lilight");
				}
				//输入的内容还没有包括@符号
				if($.trim($(this).val()).match(/.*@/)==null){
					$(".list li .ex").text($(this).val());
				}else{
				//输入的符号已经包含了@
					var str = $(this).val();
					var strs = str.split("@");
					$(".list li .ex").text(strs[0]);
					if($(this).val().length>=strs[0].length+1){
						tail=str.substr(strs[0].length+1);
						$(".list li .tail").each(function(){
							//如果数组中的元素是以文本中的后缀开头,那么就显示,否则不显示
							if(!($(this).text().match(tail)!=null&&$(this).text().indexOf(tail)==0)){
								//隐藏其他的li
								$(this).parent().hide();
							}else{
								//显示所在的li
								$(this).parent().show();
							}
						});
					}
				}
			}
			//按了回车时,将当前选中的元素写入到文本框中
			if(event.keyCode==13){
				$("#email").val($("ul.list li.lilight:visible").text());
				$("ul.list").hide();
			}
		});

		//监听上下方向键
		$("#email").keydown(function(event){
			//下方向键按下了
			if(event.keyCode==40){
				if($("ul.list li").is(".lilight")){
					if($("ul.list li.lilight").nextAll().is("li:visible")){
						$("ul.list li.lilight").removeClass("lilight").next("li").addClass("lilight");
					}
				}
			}
			//下方向键按下了
			if(event.keyCode==38){
				if($("ul.list li").is(".lilight")){
					if($("ul.list li.lilight").prevAll().is("li:visible")){
						$("ul.list li.lilight").removeClass("lilight").prev("li").addClass("lilight");
					}
				}
			}
		});

		//当鼠标点击某个下拉项时,选中该项,下拉列表隐藏
		$("ul.list li").click(function(){
			$("#email").val($(this).text());
			$("ul.list").hide();
		});

		//当鼠标划过某个下拉项时,选中该项,下拉列表隐藏
		$("ul.list li").hover(function(){
			$("ul.list li").removeClass("lilight");
			$(this).addClass("lilight");
		});

		//当鼠标点击其他位置,下拉列表隐藏
		$(document).click(function(){
			$("ul.list").hide();
		});
	});

  

总结

其实还有一个比较强大的插件,叫autocomplete,同样可以实现下拉列表的自动补全,功能更加完善,如果大家有兴趣可以去试一下。不过感觉最常用的就是邮箱自动补齐,而且直接用 jQuery 就可以比较方便地实现,所以博主就没有使用autocomplete插件,而是自己写了一下,一来练习一下,二来对这种功能的实现了解得更加透彻。

大家也可以尝试下,希望小伙伴们有帮助,加油!

jQuery 邮箱下拉列表自动补全的更多相关文章

  1. jquery的输入框自动补全功能+ajax

    jquery的输入框自动补全功能+ajax 2017年05月10日 18:51:39 辣姐什么鬼 阅读数:1461 标签: web前端 更多 个人分类: web前端   内容参考网友文章写成,原博的链 ...

  2. jquery input 搜索自动补全、typeahead.js

    最近做个一个功能需要用到自动补全,然后在网上找了很久,踩了各种的坑 最后用typeahead.js这个插件,经过自己的测试完美实现 使用方法:在页面中引入jquery.jquery.typeahead ...

  3. jQuery搜索框自动补全功能插件实现-autocomplete.js

    最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

  4. js邮箱自动补全

    邮箱自动补全js和jQuery html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  5. 知问前端——自动补全UI

    自动补全(autocomplete),是一个可以减少用户输入完整信息的UI工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 调用autocomplete()方法 var hos ...

  6. 第一百八十一节,jQuery-UI,知问前端--自动补全 UI--邮箱自动补全

    jQuery-UI,知问前端--自动补全 UI--邮箱自动补全 学习要点: 1.调用 autocomplete()方法 2.修改 autocomplete()样式 3.autocomplete()方法 ...

  7. 【jquery】邮箱自动补全 + 上下翻动

    最近在做通行证项目,里面注册模块有邮箱注册,需求方想要在输入 @ 后触发下拉框显示各个邮箱,效果如下: html 代码: <!DOCTYPE HTML> <html lang=&qu ...

  8. jquery实现自动补全邮箱地址

    开始做的邮箱补全代码 //检查email邮箱 function isEmail(str) { if (str.indexOf("@") > 0) { return true; ...

  9. jquery+css实现邮箱自动补全

    今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果.下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习. ...

随机推荐

  1. 边工作边刷题:70天一遍leetcode: day 85-1

    Inorder Successor in BST 要点:这题要注意的是如果不是BST,没法从树结构上从root向那边找p,只能遍历.而根据BST,可以只走正确方向 如果不检查right子树,可以从ro ...

  2. selenium添加源码,解决打开源码不显示问题

    问题1: 我已经导入了源码包,单在源码中点击get,想查看源码 WebDriver driver=new FirefoxDriver(); driver.get("http://www.ba ...

  3. android4.4组件分析--service组件

    6       Service 6.1            service介绍 6.1.1.            基本介绍 Service是Android四大组件之中的一个(其余的是activit ...

  4. 几种快速傅里叶变换(FFT)的C++实现

    链接:http://blog.csdn.net/zwlforever/archive/2008/03/14/2183049.aspx一篇不错的FFT 文章,收藏一下. DFT的的正变换和反变换分别为( ...

  5. Struts2标签遍历List&lt;Map&lt;String,String&gt;&gt;

    <s:if test="resultList != null && resultList.size() > 0"> <s:iterator  ...

  6. 关于hive ,eclipse老是提示加载不到驱动

    忙活了好长时间,很纳闷为什么加载不上驱动,驱动包.hive的依赖包.hadoop的依赖包也引入了,各种百度最后: hadoop-2.2.0/share/hadoop/common/hadoop-com ...

  7. Hdoj 1856.More is better 题解

    Problem Description Mr Wang wants some boys to help him with a project. Because the project is rathe ...

  8. iptables防火墙详解(三)

    linux 高级路由 策略路由(mangle表) lartc(linux advanced routing and traffic control) http://www.lartc.org # rp ...

  9. w7 全网架构-rsync-备份

    准备 1.从安装系统开始准备 安装过程中添加网卡 eth0 ip 10.0.0.210 netmask 24 gateway 10.0.0.254 eth1 ip 172.16.1.210 netma ...

  10. mysql 查看正在执行的语句

    一.不完全显示: show processlist 二.完全显示: show full processlist