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 相关文章推荐
将字符串中由空格隔开的每个单词首字母大写
Apr 06 Javascript
jquery实现简单的表单验证
Nov 17 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
Vue.js用法详解
Nov 13 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
JavaScript类的继承操作实例总结
Dec 20 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 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
PHP数据类型的总结分析
2013/06/13 PHP
利用谷歌 Translate API制作自己的翻译脚本
2014/06/04 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
php通过session防url攻击方法
2014/12/10 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
php生成二维码图片方法汇总
2016/12/17 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
Firefox 无法获取cssRules 的解决办法
2006/10/11 Javascript
非常棒的10款jQuery 幻灯片插件
2011/06/14 Javascript
js中的scroll和offset 使用比较的实例与分析
2013/09/29 Javascript
解决JS中乘法的浮点错误的方法
2014/01/03 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
jquery.cookie.js实现用户登录保存密码功能的方法
2016/04/15 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
Vue实现PC端靠边悬浮球的代码
2020/05/09 Javascript
在Debian下配置Python+Django+Nginx+uWSGI+MySQL的教程
2015/04/25 Python
Python fileinput模块使用实例
2015/05/28 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
Python中如何优雅的合并两个字典(dict)方法示例
2017/08/09 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
Django 框架模型操作入门教程
2019/11/05 Python
Python word文本自动化操作实现方法解析
2020/11/05 Python
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
关于Java finally的面试题
2016/04/27 面试题
办公室秘书自我鉴定
2014/01/18 职场文书
创业计划书模版
2014/02/05 职场文书
记帐员岗位责任制
2014/02/08 职场文书
消防先进事迹材料
2014/02/10 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
幼儿园开学报名通知
2015/07/16 职场文书