jquery css实现邮箱自动补全

前端之家收集整理的这篇文章主要介绍了jquery css实现邮箱自动补全前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天在公司做一个电子商务网站的注册会员时,要求用户在电子邮箱文本框中输入时,给与热点提示常用的电子邮箱,帮助用户选择,提高体验效果。下面是用Jquery+css实现的邮箱自动补全,供大家参考和学习。

HTML代码:emailAutoComple.html

邮箱<a href="https://www.jb51.cc/tag/zidong/" target="_blank" class="keywords">自动</a>补全 <Meta http-equiv="content-type" content="text/html; charset=UTF-8">
邮箱:

JS代码:js/emailAutoComple.js(实现自动补全的关键代码

<div class="jb51code">
<pre class="brush:js;">
jQuery.AutoComplete = function(selector){
var elt = $(selector);
var strHtml = '<div class="AutoComplete" id="AutoComplete">'+
' <ul class="AutoComplete_ul">'+
' <li hz="@163.com">'+
' <li hz="@126.com">'+
' <li hz="@139.com">'+
' <li hz="@189.com">'+
' <li hz="@qq.com">'+
' <li hz="@vip.sina.com">'+
' <li hz="@sina.cn">'+
' <li hz="@sina.com">'+
' <li hz="@sohu.com">'+
' <li hz="@hotmail.com">'+
' <li hz="@gmail.com">'+
' <li hz="@wo.com.cn">'+
' <li hz="@21cn.com">'+
' <li hz="@aliyun.com">'+
' <li hz="@yahoo.com">'+
' <li hz="@foxmail.com">'+
' '+
'

';
//将div追加到body上
$('body').append(strHtml);
var autoComplete,autoLi;
autoComplete = $('#AutoComplete');
autoComplete.data('elt',elt);
autoLi = autoComplete.find('li');
autoLi.mouSEOver(function(){
$(this).siblings().filter('.hover').removeClass('hover');
$(this).addClass('hover');
}).mouSEOut(function(){
$(this).removeClass('hover');
}).mousedown(function(){
autoComplete.data('elt').val($(this).text()).change();
autoComplete.hide();
});
//用户名补全+翻动
elt.keyup(function(e){
if(/13|38|40|116/.test(e.keyCode) || this.value==''){
return false;
}
var username = this.value;
if(username.indexOf('@')==-1){
autoComplete.hide();
return false;
}
autoLi.each(function(){
this.innerHTML = username.replace(/\@+.*/,'')+$(this).attr('hz');
if(this.innerHTML.indexOf(username)>=0){
$(this).show();
}else{
$(this).hide();
}
}).filter('.hover').removeClass('hover');
autoComplete.show().css({
left : $(this).offset().left,top : $(this).offset().top + $(this).outerHeight(true) - 1,position: 'absolute',zIndex: '99999'
});
if(autoLi.filter(':visible').length==0){
autoComplete.hide();
}else{
autoLi.filter(':visible').eq(0).addClass('hover');
}
}).keydown(function(e){
if(e.keyCode==38){ //上
autoLi.filter('.hover').prev().not('.AutoComplete_title').addClass('hover').next().removeClass('hover');
}else if(e.keyCode==40){ //下
autoLi.filter('.hover').next().addClass('hover').prev().removeClass('hover');
}else if(e.keyCode==13){ //确定
autoLi.filter('.hover').mousedown();
}
}).focus(function(){
autoComplete.data('elt',$(this));
}).blur(function(){
autoComplete.hide();
});
};

CSS代码:css/emailAutoComple.css

效果图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/jquery/44465.html

猜你在找的jQuery相关文章