JS实现在输入框内输入@时,邮箱账号自动补全-创新互联
.wrap{width:200px;margin:0 auto;}
h2{font-size:36px;text-align:center;line-height:60px;}
p{font-size:20px;text-align:center;line-height:60px;}
.inp{width:190px;border:1px solid #ccc;border-radius:5px;height:30px;line-height:30px;padding:5px;}
#AutoComplete{background:#fff;border:1px solid #4190db;display:none;width:200px;}
#AutoComplete ul{list-style-type:none;margin:0;padding:0;}
#AutoComplete li{color:#333;cursor:pointer;font:12px/22px \5b8b\4f53;text-indent:5px;}
#AutoComplete .hover{background:#6eb6fe;color:#fff;}
邮箱自动补全 + 上下翻动
当在输入框内输入 @ 时,自动显示各个邮箱的下拉列表。
jQuery.AutoComplete = function(selector){
var elt = $(selector);
var autoComplete,autoLi;
var strHtml = [];
strHtml.push('
strHtml.push('
- ');
- 请选择邮箱后缀 ');
strHtml.push('
strHtml.push('
');strHtml.push('
');strHtml.push('
');strHtml.push('
');strHtml.push('
');strHtml.push('
strHtml.push('
$('body').append(strHtml.join(''));
autoComplete = $('#AutoComplete');
autoComplete.data('elt',elt);
autoLi = autoComplete.find('li:not(.AutoComplete_title)');
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){ //Enter
autoLi.filter('.hover').mousedown();
e.preventDefault(); //如有表单,阻止表单提交
}
}).focus(function(){
autoComplete.data('elt',$(this));
}).blur(function(){
autoComplete.hide();
});
}
$(function(){
$.AutoComplete('#email');
});
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文标题:JS实现在输入框内输入@时,邮箱账号自动补全-创新互联
网站网址:http://cdiso.cn/article/dcspjc.html