综述

我想大家一定见到过,在某个网站填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮你自动补全邮箱的功能。现在我们就用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.autocomplete自动补全功能

    项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...

随机推荐

  1. oracle 自增长序列

    create or replace TRIGGER "METTINGUSER".TRG_PREPN BEFORE INSERT ON "PREPROJFUN" ...

  2. 应用程序启动管理 Winform版

    ★前言      开发这个小工具的想法主要是机器中安装了数据库,每次设置开机启动数据库服务的话,则系统启动很慢,每次都得手动到服务管理器中停止服务,很是繁琐,相信不少做开发的朋友会遇到同样的问题,就有 ...

  3. SQL_Server_2008修改sa密码的方法

    转载自:http://blog.csdn.net/templar1000/article/details/20211191 1. 先用Window身份验证方式登陆进去,选择数据库实例,右键选择属性—— ...

  4. EF文章连接

    http://www.cnblogs.com/shanyou/archive/2011/07/17/2108953.html http://www.cnblogs.com/haogj/archive/ ...

  5. Python入门笔记(8):列表

    一.序列类型操作符 1.切片[]和[:] 2.成员关系操作符(in ,not in ) 1: s1 = [1,2,3,4,5,6,7] 2: s2 = [2,3,6] 3: s3 = [] 4: fo ...

  6. C语言。自定义函数简单版

    #include <stdio.h> //函数声明 void sayHi(); //函数实现 void sayHI() { printf("大家好!!\n"); } i ...

  7. canvas 基础知识整理(一)

    canvas这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上. html的基本 ...

  8. 解决 ListView 水平滚动条不出现的问题(转载)

    问题的原因:http://www.cnblogs.com/nankezhishi/archive/2010/03/17/wpfbug13.html 解决方法:http://www.cnblogs.co ...

  9. IT江湖

    我喜欢看武侠电影,尤其的70-80年代的邵氏电影,在这个期间,邵氏公司将金庸和古老很多小说都改拍成了电影,可以说,看这些电影是一种享受,真的! 对于现实中的IT世界,也像是一个江湖,当你掌握了一些技能 ...

  10. 关于使用deepin在linux下安装mysql出现Can&#39;t connect to local MySQL server through socket &#39;/tmp/mysql/mysql.sock&#39; (2)的解决方法

    根据目录/etc/mysql打开文件debain.cnf 此时文本里的内容为 # Automatically generated for Debian scripts. DO NOT TOUCH![c ...