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和jquery制作方法分享
Feb 26 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
jQuery读取XML文件内容的方法
Mar 09 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
Feb 15 Javascript
node.js从数据库获取数据
May 08 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 Javascript
node错误处理与日志记录的实现
Dec 24 Javascript
js 将线性数据转为树形的示例代码
May 28 Javascript
深入学习js函数的隐式参数 arguments 和 this
Jun 24 Javascript
关于微信小程序map组件z-index的层级问题分析
Jul 09 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实现微信发红包程序
2015/08/24 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
Yii基于数组和对象的Model查询技巧实例详解
2015/12/28 PHP
解决php用mysql方式连接数据库出现Deprecated报错问题
2019/12/25 PHP
Jquery知识点三 jquery表单对象操作
2011/01/17 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
2011/06/08 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
js判断字符长度以及中英文数字等
2013/12/31 Javascript
Javascript 遍历页面text控件详解
2014/01/06 Javascript
多种方法实现load加载完成后把图片一次性显示出来
2014/02/19 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
JavaScript简单下拉菜单实例代码
2015/09/07 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
js模拟实现百度搜索
2020/06/28 Javascript
Python批量按比例缩小图片脚本分享
2015/05/21 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
Python字符串匹配之6种方法的使用详解
2019/04/08 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
详解Python3中的 input() 函数
2020/03/18 Python
keras中的History对象用法
2020/06/19 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
使用html5实现表格实现标题合并的实例代码
2019/05/13 HTML / CSS
美国鲜花递送:UrbanStems
2021/01/04 全球购物
怎样客观的做好自我评价
2013/12/28 职场文书
模范家庭事迹材料
2014/02/10 职场文书
演讲稿开场白台词
2014/08/25 职场文书
单独二胎证明
2015/06/24 职场文书
CentOS7和8下安装Maven3.8.4
2022/04/07 Servers
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技