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 相关文章推荐
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
Feb 09 Javascript
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
js Date概念详细介绍
Nov 22 Javascript
javascript实现json页面分页实例代码
Feb 20 Javascript
jQuery圆形统计图开发实例
Jan 04 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
简单的js计算器实现
Oct 26 Javascript
js实现鼠标左右移动,图片也跟着移动效果
Jan 25 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
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游戏编程25个脚本代码
2011/02/08 PHP
PHP中如何调用webservice的实例参考
2013/04/25 PHP
php环境无法上传文件的解决方法
2014/04/30 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
Jquery 切换不同图片示例代码
2013/12/05 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
javascript实现二级级联菜单的简单制作
2015/11/19 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
vue 实现动态路由的方法
2020/07/06 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
python中解析json格式文件的方法示例
2017/05/03 Python
获取Django项目的全部url方法详解
2017/10/26 Python
python使用udp实现聊天器功能
2018/12/10 Python
详解python中index()、find()方法
2019/08/29 Python
将pytorch转成longtensor的简单方法
2020/02/18 Python
Tensorflow卷积实现原理+手写python代码实现卷积教程
2020/05/22 Python
Boda Skins皮衣官网:奢侈皮夹克,全球配送
2016/12/15 全球购物
英国在线定做百叶窗网站:Make My Blinds
2020/08/17 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
工程预算与管理应届生求职信
2013/10/06 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
股票投资建议书
2014/05/19 职场文书
学生检讨书
2015/01/27 职场文书
给校长的建议书范文
2015/09/14 职场文书