jQuery实现邮箱下拉列表自动补全功能


Posted in Javascript onSeptember 08, 2016

记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能。今天小编给给大家分享下我基于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实现邮箱下拉列表自动补全功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 判断控件获得焦点的示例代码
Mar 04 Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 Javascript
javascript从image转换为base64位编码的String
Jul 29 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
简述JavaScript的正则表达式中test()方法的使用
Jun 16 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
详解webpack解惑:require的五种用法
Jun 09 Javascript
基于JavaScript+HTML5 实现打地鼠小游戏逻辑流程图文详解(附完整代码)
Nov 02 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
LayUI switch 开关监听 获取属性值、更改状态的方法
Sep 21 Javascript
vue-router重写push方法,解决相同路径跳转报错问题
Aug 07 Javascript
JS图片放大效果简单实现代码
Sep 08 #Javascript
Angularjs 实现一个幻灯片示例代码
Sep 08 #Javascript
利用Vue.js指令实现全选功能
Sep 08 #Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 #Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 #Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
Sep 08 #Javascript
jQuery删除节点用法示例(remove方法)
Sep 08 #Javascript
You might like
实现 win2003 下 mysql 数据库每天自动备份
2006/12/06 PHP
PHP反向代理类代码
2014/08/15 PHP
PHP分页类集锦
2014/11/18 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
jQuery实现两个select控件的互移操作
2016/12/22 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
2019/05/08 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
jQuery实现穿梭框效果
2021/01/19 jQuery
[02:23]2014DOTA2国际邀请赛中国战队回顾
2014/08/01 DOTA
TensorFlow saver指定变量的存取
2018/03/10 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python协程操作之gevent(yield阻塞,greenlet),协程实现多任务(有规律的交替协作执行)用法详解
2019/10/14 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
解决windows上安装tensorflow时报错,“DLL load failed: 找不到指定的模块”的问题
2020/05/20 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
大学生个人总结的自我评价
2013/10/05 职场文书
行政助理求职自荐信
2013/10/26 职场文书
大学生党课思想汇报
2013/12/29 职场文书
总经理工作职责范文
2014/03/14 职场文书
购房意向书
2014/08/30 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
简单聊聊Golang中defer预计算参数
2022/03/25 Golang
Python实现自动玩连连看的脚本分享
2022/04/04 Python