jQuery邮箱自动补全

来源：互联网发布：linux下载gcc 编辑：程序博客网时间：2024/05/22 03:28

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",//高度:默认200pxheight:'200px',//高亮文本颜色hoverColor:'#000000',boxColor:'#3399CC'};var mailBox="<div class='mailBox'><ul></ul></div>",mail = jQuery.extend({},defaultOptions,options || {}),current=$(this),//最多可以放多少个limaxLiLen=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);}}} });//失去焦点的时候关闭弹出层,这里不使用blurcurrent.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);

效果图展示：

0 0