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

记得，在上个项目中，遇到这样一个需求，网站要求填写邮箱的时候，还没有填写完，就会出现一系列下拉列表，帮助自动补全邮箱的功能。今天小编给给大家分享下我基于jquery是怎么实现此功能的！

功能简述

•填写邮箱名字，出现下拉列表，自动补全邮箱

•点击上下按键，选取下拉列表邮箱

•按回车键，选中列表内容，隐藏下拉列表

•鼠标经过，下拉列表选项设置为高亮

•鼠标点击，选中下拉列表选项，隐藏下拉列表

HTML

HTML代码很简单，我们就一个简单的输入框，然后一个ul标签，在内部可以放好多li标签。

以上便是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

var liElement=$("

@ "+mail[i]+"");

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实现邮箱下拉列表自动补全功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！