jQuery邮箱自动补全

jQuery各种宽度和高度的获取：

width()/height():获取元素的宽/高。
innerWidth()/innerHeight():获取元素的宽/高(包括内边距)。
outerWidth()/outerHeight():获取元素的宽/高(包括内边距和边框)。
outerWidth(true)/outerHeight(true):获取元素的宽/高(包括内边距和外边距和边框)。
$(document).height():获取文档(HTML)文档的高度
$(window).height():获取窗口(浏览器)的高度

测试用例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试用例</title>
<style type="text/css">
*{margin:0px;padding:0px;font-family:微软雅黑;font-size:9pt;}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.mail.js"></script>
</head>
<input type="text" style="padding-left:10px;width:250px;height:25px;border:2px solid #3399CC;margin-left:40px;margin-top:50px;ime-mode:disabled" id="mail"/>
<body>
</body><script type="text/javascript">
jQuery(document).ready(function(){
$("#mail").mailAuto({
"highLightHeight":"25px",
"highLighterColor":"#FF9900",
"hoverColor":"#FFFFFF",
"height":"250px"
});
});
</script>
</html>

以后慢慢重构：

版本1：

/** * jQuery.mail.js:邮箱自动补全* 1、不能输入空格* 2、支持向上、向下、Enter键选择，支持鼠标选择* 3、当没有匹配的数据自动隐藏* 4、触发keyup事件展示下拉框* 5、失去焦点时自动隐藏等* @author:xuzengqiang* @since:2015-1-7 13:56:04
**/
(function($){
$.fn.mailAuto = function(options){
var MAIL_CLASS_NAME="mailBox",
isIE=/msie/.test(navigator.userAgent.toLowerCase()),
win = isIE?document:window;
//默认参数
var defaultOptions = {
zIndex:10,
//邮件数组
mailArray:["@qq.com","@163.com","@gmail.com","@msn.com","@hotmail.com","@aol.com","@ask.com","@live.com","@0355.com","@163.net","@263.net","@yeah.com","@googlemail.com","@mail.com","@56.com","@sina.com","@21cn.com","@sohu.com","@yahoo.com.cn","@etang.com","@chianren.com","@sogou.com",'@vip.163.com','@vip.126.com',"@vip.qq.com"],
//高亮显示的颜色
highLighterColor:'#EFEFEF',
//高亮区域显示的高度
highLightHeight:'20px',
//宽度,默认为与文本框宽度相同,不要写width(),需要考虑要padding的情况
width:$(this).innerWidth()+"px",
//高度:默认200px
height:'200px',
//高亮文本颜色
hoverColor:'#000000',
boxColor:'#3399CC'
};var mailBox="<div class='mailBox'><ul></ul></div>",
mail = jQuery.extend({},defaultOptions,options || {}),
current=$(this),
//最多可以放多少个li
maxLiLen=parseInt(parseInt(mail.height)/parseInt(mail.highLightHeight))-1,
//当前显示Li的个数
liNumber=maxLiLen
;//如果已经有,则移除
if($(".mailBox").length>0) {
$(".mailBox").empty().remove();
}
$("body").prepend(mailBox);var $mailBox=$(".mailBox"),
$mailBoxUl=$mailBox.find("ul"),
$mailBoxLi=$mailBoxUl.find("li"),
//下拉框显示位置
positionX=current.offset().left,
positionY=current.offset().top+current.height()+parseInt(current.css("border-top-width"))
;jQuery.extend({
//初始化容器样式
initStyle:function(){
$mailBox.css({"border-width":current.css("border-left-width"),"background":"#FFFFFF","border-style":"solid","border-color":mail.boxColor,"height":mail.height,"width":mail.width,"position":"absolute","display":"none","overflow":"hidden","z-index":mail.zIndex,"border-top":"0px"});
$mailBoxUl.css({"list-style":"none",
"border-top-width":"0px",
"float":"left",
"width":mail.width,
"height":mail.height});
$(".current_line").css("background",mail.highLighterColor);
},
closeBox:function(timer){
$mailBox.slideUp(timer || 0);
$mailBoxUl.find("li").empty().remove();
//恢复li的个数
liNumber = mail.number;
},
initMailBox:function(content){
jQuery.setLocation();
$mailBox.slideDown(100);
$mailBox.find("li").remove().empty();
$mailBoxUl.append("<li style='color:#6699CC'>请选择或者继续输入...</li>");
$mailBoxUl.append(content);
var $mailLi=$mailBox.find("li"),
color=mail.highLighterColor;
$mailLi.css({"height":mail.highLightHeight,"padding-left":current.css("padding-left"),"cursor":"pointer","line-height":mail.highLightHeight});
jQuery.highLigterStyle($mailLi.eq(1));$mailLi.mouseover(function(){
if($(this).index()==0) return false;
jQuery.highLigterStyle($(this));
}).click(function(){
if($(this).index()==0) return false;
current.val($(this).text());
jQuery.closeBox(0);
//自动触发失去焦点:为了能让jQuery.validate.js验证
current.blur();
});$(document).keydown(function(event){
var code = event.keyCode,
currentLi = $mailBox.find(".current_line"),
index = currentLi.index();
if(code == 40) { //向下
index = (index == liNumber)?0:index;
jQuery.highLigterStyle($mailLi.eq(index+1));
} else if(code == 38) { //向上index = (index == 1)?liNumber+1:index;jQuery.highLigterStyle($mailLi.eq(index-1));
} else if(code == 13) {
if(currentLi.length == 0) return false;
current.val(currentLi.text());
jQuery.closeBox(0);
}
});
},
//高亮样式
highLigterStyle:function(){
var color=mail.highLighterColor;
if(arguments.length==1){
arguments[0].addClass("current_line").css({"background":color,"color":mail.hoverColor})
.siblings().removeClass("current_line")
.css({"background":"#FFFFFF","color":"#000000"});
$mailBox.find("li:eq(0)").css({"color":"#3399CC","background":"#EFEFEF"});
}
},
//设置弹出层位置
setLocation:function(){
//下拉框显示位置
var positionX=current.offset().left,
positionY=current.offset().top+current.outerHeight();
$mailBox.css({"left":positionX+"px","top":positionY+"px"});
},
trim:function(){
if(arguments.length == 1 && typeof arguments[0] == "string") {
return arguments[0].replace(/^\s\s*/,'').replace(/\s\s*$/,'');
}
return arguments[0];
},
startWith:function(){
if(arguments.length != 2) {
return false;
}
var str=arguments[0],s=arguments[1];
if(typeof str == "string" && typeof s == "string") {
if (s == null || s == "" || str.length == 0 || s.length > str.length) {
return false;
} else if(str.substr(0,s.length) == s) {
return true;
} else {
return false;
}
}
return false;
}
});//样式初始化
jQuery.initStyle();//有个bug,就是利用鼠标复制粘贴无效
current.keyup(function(event){
var mailContent=jQuery.trim(current.val()),
start=mailContent.indexOf("@"),
content = "",
code = event.keyCode;
if(code == 38 || code == 40 || code == 13) return false;
current.val(mailContent);
if( mailContent != '' && mailContent != null){
if(start == -1 ) {
for(var i=0;i<maxLiLen;i++){
content += "<li>"+(mailContent+mail.mailArray[i])+"</li>";
}
jQuery.initMailBox(content);
} else {
var matchLen = 0,
suffix = mailContent.substr(start);
for(var i=0,maxLen=mail.mailArray.length;i<maxLen;i++) {
if(matchLen == maxLiLen){
break;
}
mailContent = mailContent.substr(0,start);
if(jQuery.startWith(mail.mailArray[i],suffix)) {
content += "<li>"+(mailContent+mail.mailArray[i])+"</li>";
matchLen ++;
}
}
liNumber=matchLen;
//如果没有匹配值直接关闭
if(matchLen == 0){
jQuery.closeBox(0);
} else {
jQuery.initMailBox(content);
}
}
}
});//失去焦点的时候关闭弹出层,这里不使用blur
current.data("hidden",1);
$mailBox.data("hidden",1);
$(win).bind("click",function(event){
var $target=$(event.target);
if($target.data("hidden") == 1) return false;
parents=$target.parents();
for(var i=0,maxLen=parents.length;i<maxLen;i++){
var hidden = $(parents[i]).data("hidden");
if(hidden == 1) return false;
}
jQuery.closeBox(0);
});  //改变窗口大小的时候重新设置弹出层的位置
$(window).resize(function(){
jQuery.setLocation();
});
};
})(jQuery);

jQuery邮箱自动补全相关推荐

邮箱自动补全 + 上下翻动
[jquery]邮箱自动补全 + 上下翻动最近在做通行证项目,里面注册模块有邮箱注册,需求方想要在输入 @ 后触发下拉框显示各个邮箱,效果如下: html 代码: <!DOCTYPE HTML ...
Android 邮箱自动补全-MultiAutoCompleteTextView实现
因为项目需要,要写一个邮箱自动补全的EditText,刚开始考虑使用AutoCompleteTextView来实现,但是满足不到需求官方组件太low了... 先来介绍下AutoCompleteText ...
android 邮箱知乎,仿知乎登陆邮箱自动补全，邮箱补全
仿知乎登陆邮箱自动补全,邮箱补全项目要求: 登陆界面输入邮箱,自动匹配常用邮箱并自动补全后缀. 比如邮箱为10376129@qq.com,当我输入10376129@q时,输入框自动补全后面的q.co ...
vue element-ui elementUi 邮箱自动补全邮箱自动填充
<el-autocompletev-model="form.user.email":fetch-suggestions="querySearchEmail" ...
jquery.autocomplete自动补全功能
1.jquery.autocomplete参考地址 http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/ http:// ...
jquery表格自动补全插件——datagrid
①在页面中创建一个或多个表格,设定表头,给每一个th添加一个field属性,属性值与后端数据名字相同 <table> <thead> & ...
JS实现在输入框内输入@时，邮箱账号自动补全
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8&quo ...
html邮箱下拉栏,jQuery实现邮箱下拉列表自动补全功能
记得,在上个项目中,遇到这样一个需求,网站要求填写邮箱的时候,还没有填写完,就会出现一系列下拉列表,帮助自动补全邮箱的功能.今天小编给给大家分享下我基于jquery是怎么实现此功能的! 功能简述 •填 ...
jQuery搜索框自动补全功能插件实现-autocomplete.js
最近用nodeclub实现股票的输入关键字自动补全股票信息进行搜索功能,原先用jQuery-ui,结果jQuery-ui库太大,所以考虑用其他插件,最终选择使用autocomplete.js,控件简单 ...

jQuery邮箱自动补全

jQuery邮箱自动补全相关推荐

最新文章

热门文章