邮箱下拉自动填充选择

1.需要一个js文件：jquery.mailAutoComplete-3.1.js

[javascript] view plain copy

1. (function($){  
2.     $.fn.mailAutoComplete = function(options){  
3.         var defaults = {  
4.             boxClass: "mailListBox", //外部box样式  
5.             listClass: "mailListDefault", //默认的列表样式  
6.             focusClass: "mailListFocus", //列表选样式中  
7.             markCalss: "mailListHlignt", //高亮样式  
8.             zIndex: 1,  
9.             autoClass: true, //是否使用插件自带class样式  
10.             mailArr: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组  
11.             textHint: false, //文字提示的自动显示与隐藏  
12.             hintText: "",  
13.             focusColor: "#333",  
14.             blurColor: "#999"  
15.         };  
16.         var settings = $.extend({}, defaults, options || {});  
17.           
18.         //页面装载CSS样式  
19.         if(settings.autoClass && $("#mailListAppendCss").size() === 0){  
20.             $('<style id="mailListAppendCss" type="text/css">.mailListBox{border:1px solid #369; background:#fff; font:12px/20px Arial;}.mailListDefault{padding:0 5px;cursor:pointer;white-space:nowrap;}.mailListFocus{padding:0 5px;cursor:pointer;white-space:nowrap;background:#369;color:white;}.mailListHlignt{color:red;}.mailListFocus .mailListHlignt{color:#fff;}</style>').appendTo($("head"));   
21.         }  
22.         var cb = settings.boxClass, cl = settings.listClass, cf = settings.focusClass, cm = settings.markCalss; //插件的class变量  
23.         var z = settings.zIndex, newArr = mailArr = settings.mailArr, hint = settings.textHint, text = settings.hintText, fc = settings.focusColor, bc = settings.blurColor;  
24.         //创建邮件内部列表内容  
25.         $.createHtml = function(str, arr, cur){  
26.             var mailHtml = "";  
27.             if($.isArray(arr)){  
28.                 $.each(arr, function(i, n){  
29.                     if(i === cur){  
30.                         mailHtml += '<div class="mailHover '+cf+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>';     
31.                     }else{  
32.                         mailHtml += '<div class="mailHover '+cl+'" id="mailList_'+i+'"><span class="'+cm+'">'+str+'</span>@'+arr[i]+'</div>';     
33.                     }  
34.                 });  
35.             }  
36.             return mailHtml;  
37.         };  
38.         //一些全局变量  
39.         var index = -1, s;  
40.         $(this).each(function(){  
41.             var that = $(this), i = $(".justForJs").size();   
42.             if(i > 0){ //只绑定一个文本框  
43.                 return;   
44.             }  
45.             var w = that.outerWidth(), h = that.outerHeight(); //获取当前对象（即文本框）的宽高  
46.             //样式的初始化  
47.             that.wrap('<span style="display:inline-block;position:relative;"></span>')  
48.                 .before('<div id="mailListBox_'+i+'" class="justForJs '+cb+'" style="min-width:'+w+'px;_width:'+w+'px;position:absolute;left:-6000px;top:'+h+'px;z-index:'+z+';"></div>');  
49.             var x = $("#mailListBox_" + i), liveValue; //列表框对象  
50.             that.focus(function(){  
51.                 //父标签的层级  
52.                 $(this).css("color", fc).parent().css("z-index", z);      
53.                 //提示文字的显示与隐藏  
54.                 if(hint && text){  
55.                     var focus_v = $.trim($(this).val());  
56.                     if(focus_v === text){  
57.                         $(this).val("");  
58.                     }  
59.                 }  
60.                 //键盘事件  
61.                 $(this).keyup(function(e){  
62.                     s = v = $.trim($(this).val());    
63.                     if(/@/.test(v)){  
64.                         s = v.replace(/@.*/, "");  
65.                     }  
66.                     if(v.length > 0){  
67.                         //如果按键是上下键  
68.                         if(e.keyCode === 38){  
69.                             //向上  
70.                             if(index <= 0){  
71.                                 index = newArr.length;    
72.                             }  
73.                             index--;  
74.                         }else if(e.keyCode === 40){  
75.                             //向下  
76.                             if(index >= newArr.length - 1){  
77.                                 index = -1;  
78.                             }  
79.                             index++;  
80.                         }else if(e.keyCode === 13){  
81.                             //回车  
82.                             if(index > -1 && index < newArr.length){  
83.                                 //如果当前有激活列表  
84.                                 $(this).val($("#mailList_"+index).text());    
85.                             }  
86.                         }else{  
87.                             if(/@/.test(v)){  
88.                                 index = -1;  
89.                                 //获得@后面的值  
90.                                 //s = v.replace(/@.*/, "");  
91.                                 //创建新匹配数组  
92.                                 var site = v.replace(/.*@/, "");  
93.                                 newArr = $.map(mailArr, function(n){  
94.                                     var reg = new RegExp(site);   
95.                                     if(reg.test(n)){  
96.                                         return n;     
97.                                     }  
98.                                 });  
99.                             }else{  
100.                                 newArr = mailArr;  
101.                             }  
102.                         }  
103.                         x.html($.createHtml(s, newArr, index)).css("left", 0);  
104.                         if(e.keyCode === 13){  
105.                             //回车  
106.                             if(index > -1 && index < newArr.length){  
107.                                 //如果当前有激活列表  
108.                                 x.css("left", "-6000px");     
109.                             }  
110.                         }  
111.                     }else{  
112.                         x.css("left", "-6000px");     
113.                     }  
114.                 }).blur(function(){  
115.                     if(hint && text){  
116.                         var blur_v = $.trim($(this).val());  
117.                         if(blur_v === ""){  
118.                             $(this).val(text);  
119.                         }  
120.                     }  
121.                     $(this).css("color", bc).unbind("keyup").parent().css("z-index",0);  
122.                     x.css("left", "-6000px");     
123.                       
124.                 });   
125.                 //鼠标经过列表项事件  
126.                 //鼠标经过  
127.                 $(".mailHover").live("mouseover", function(){  
128.                     index = Number($(this).attr("id").split("_")[1]);     
129.                     liveValue = $("#mailList_"+index).text();  
130.                     x.children("." + cf).removeClass(cf).addClass(cl);  
131.                     $(this).addClass(cf).removeClass(cl);  
132.                 });  
133.             });  
134.   
135.             x.bind("mousedown", function(){  
136.                 that.val(liveValue);          
137.             });  
138.         });  
139.     };  
140.       
141. })(jQuery);  

2.jq库当然必不可少了，这里就略了

下面来测试

3.样式表：

[css] view plain copy

1. <style type="text/css">  
2.         .out_box{border:1px solid #ccc; background:#fff; font:12px/20px Tahoma;}  
3.         .list_box{border-bottom:1px solid #eee; padding:0 5px; cursor:pointer;}  
4.         .focus_box{background:#f0f3f9;}  
5.         .mark_box{color:#c00;}  
6.     </style>  

4.测试代码

[html] view plain copy

1. <p>自定义class展示：<input type="text" id="customTest" size="28" /></p>  
2.       
3.     <script src="js/jquery-1.6.min.js" type="text/javascript"></script>  
4.     <script src="js/jquery.mailAutoComplete-3.1.js" type="text/javascript"></script>  
5.     <script type="text/javascript">  
6.         $(function() {  
7.             $("#customTest").mailAutoComplete({  
8.                 boxClass: "out_box", //外部box样式  
9.                 listClass: "list_box", //默认的列表样式  
10.                 focusClass: "focus_box", //列表选样式中  
11.                 markCalss: "mark_box", //高亮样式  
12.                 autoClass: false,  
13.                 textHint: true, //提示文字自动隐藏  
14.                 hintText: "请输入邮箱地址"  
15.             });  
16.         })  
17.     </script>