jQuery邮箱自动补全
2015-01-07 13:55
295 查看
jQuery各种宽度和高度的获取：
测试用例：
版本1：
效果图展示：
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实现Email邮箱地址自动补全功能代码
- jQuery autocomplete的使用(邮箱自动补全)
- Web开发之－JQuery 邮箱自动补全
- jquery实现邮箱自动补全功能示例分享
- jquery 实现输入邮箱时自动补全下拉提示功能
- jQuery 实现邮箱下拉列表自动补全功能
- jQuery实现文本框邮箱输入自动补全效果
- 【jquery】邮箱自动补全 + 上下翻动
- jQuery实现Email邮箱地址自动补全功能代码
- jQuery实现邮箱下拉列表自动补全功能
- jQuery实现输入框邮箱内容自动补全与上下翻动显示效果【附demo源码下载】
- jQuery 实现邮箱下拉列表自动补全功能
- Jquery李炎恢——43邮箱自动补全UI【9】
- jQuery实现文本框邮箱输入自动补全效果
- jquery 实现输入邮箱时自动补全下拉提示功能
- jquery实现邮箱自动补全功能示例分享
- 第一百八十一节，jQuery-UI，知问前端--自动补全 UI--邮箱自动补全
- jquery实现自动补全邮箱地址
- jquery插件 邮箱后缀自动匹配 可自定义