魔扣科技

今天在网上看到一篇文章，在Magento中会员注册，输入email时会下拉提示常用后缀，对用户体验不错，然后就把它转载到我的博客里。现在做电子商务竟争越来越大，不少人都为网站的用户体验费尽了脑汁。用户体验越来越重要，所以小小的功能对网站提示至关重要，让客户对网站没那么反感。如下图：

将主要的代码做成一个js文件在page.xml文件调用

js文件内容：

1. jQuery(function($) {
   
2. var mailArr = new Array("@hotmail.com", "@gmail.com", "@yahoo.com", "@aol.com", "@hotmail.co.uk", "@msn.com", "@yahoo.co.uk", "@comcast.net", "@live.com", "@laposte.net", "@googlemail.com");
   
3.         $.fn.mailAutoTip = function(options) {
   
4.                 var setting = {
   
5.                         subBox: "#MailAutoTip",    //下拉框div
   
6.                         subOp: "li",
   
7.                         id: "#email , #email_address",   //email输入框的id属性,在其他地方调用需要在此添加输入框属性.
   
8.                         mailArr: mailArr,
   
9.                         hoverClass: "on",
   
10.                         _cur: 0 /*index*/
    
11.                 };
    
12.                 var opts = $.extend({}, setting, options || {});
    
13.                 //tipFun
    
14.                 var tipFun = function(_v, o) {
    
15.                                 opts._cur = 0;
    
16.                                 var _that = o;
    
17.                                 $(opts.subBox).show();
    
18.                                 var str = "<ul>";
    
19.                                 str += "<li id="e_type"> Please select email type:</li>";
    
20.                                 var e = _v.indexOf("@");
    
21.                                 if (e == -1) {
    
22.                                         $.each(opts.mailArr, function(s, m) {
    
23.                                                 str += '<li><a href="javascript:void(0)" >' + _v + m + "</a></li>";
    
24.                                         });
    
25.                                 } else {
    
26.                                         var _sh = _v.substring(0, e)
    
27.                                         var _se = _v.substring(e);
    
28.                                         var ind = 0;
    
29.                                         $.each(opts.mailArr, function(s, m) {
    
30.                                                 if (m.indexOf(_se) != -1) {
    
31.                                                         str += '<li><a href="javascript:void(0)" >' + _sh + m + "</a></li>";
    
32.                                                         ind = 1;
    
33.                                                 }
    
34.                                         });
    
35.                                         if (ind == 0) {
    
36.                                                 str += '<li><a class="cur_val" href="javascript:void(0)" >' + _v + "</a></li>";
    
37.                                         }
    
38.                                 }
    
39.                                 str += "</ul>";
    
40.                                 $(opts.subBox).html(str); /*hover*/
    
41.                                 $(opts.subBox).find(opts.subOp).hover(function() {
    
42.                                         var _that = $(this);
    
43.                                         _that.addClass(opts.hoverClass);
    
44.                                 }, function() {
    
45.                                         var _that = $(this);
    
46.                                         _that.removeClass(opts.hoverClass)
    
47.                                 }); /*click*/
    
48.                                 $(opts.subBox).find(opts.subOp).each(function() {
    
49.                                         $(this).click(function(e) {
    
50.                                                 if ($(e.target).attr("id") != "e_type") {
    
51.                                                         $(opts.id).val($(e.target).html());
    
52.                                                         $(opts.subBox).hide();
    
53.                                                         e.stopPropagation();
    
54.                                                 }
    
55.                                         });
    
56.                                 })
    
57.                         }; /*itemFun*/
    
58.                 var itemFun = function() {
    
59.                                 var _tempArr = $(opts.subBox).find(opts.subOp);
    
60.                                 var _size = _tempArr.size();
    
61.                                 for (var i = 0; i < _size; i++) {
    
62.                                         _tempArr.eq(i).removeClass(opts.hoverClass);
    
63.                                 }
    
64.                                 if (_size > 1) {
    
65.                                         if (opts._cur > _size - 1) {
    
66.                                                 opts._cur = 1;
    
67.                                         }
    
68.                                         if (opts._cur < 1) {
    
69.                                                 opts._cur = _size - 1;
    
70.                                         }
    
71.                                         _tempArr.eq(opts._cur).addClass(opts.hoverClass);
    
72.                                 } else {
    
73.                                         opts._cur = 1;
    
74.                                 }
    
75.                         };
    
76.                 $(opts.id).keyup(function(e) {
    
77.                         var _that = $(this);
    
78.                         if (_that.val() != "") {
    
79.                                 if (e.keyCode != 38 && e.keyCode != 40 && e.keyCode != 13 && e.keyCode != 27) {
    
80.                                         var _inputVal = _that.val();
    
81.                                         tipFun(_inputVal, _that);
    
82.                                 }
    
83.                         } else {
    
84.                                 $(opts.subBox).hide();
    
85.                         }
    
86.                 });
    
87.                 $(document).bind("click", function(e) {
    
88.                         $(opts.subBox).hide();
    
89.                 });
    
90.                 $(document).keydown(function(e) {
    
91.                         switch (e.keyCode) {
    
92.                         case 40:
    
93.                                 //up
    
94.                                 opts._cur++;
    
95.                                 itemFun()
    
96.                                 break;
    
97.                         case 38:
    
98.                                 //down
    
99.                                 opts._cur--;
    
100.                                 itemFun()
     
101.                                 break;
     
102.                         default:
     
103.                                 break;
     
104.                         }
     
105.                 })
     
106.                 $(opts.id).keydown(function(e) {
     
107.                         var _temp = $(opts.subBox).find(opts.subOp);
     
108.                         if (e.keyCode == 13) {
     
109.                                 if (opts._cur != 0) {
     
110.                                         $(this).val(_temp.eq(opts._cur).text());
     
111.                                         opts._cur = 0;
     
112.                                 }
     
113.                                 $(opts.subBox).hide();
     
114.                                 e.stopPropagation();
     
115.                         }
     
116.                 });
     
117.         }
     
118. });

复制代码

比如在客户登录页面应用。
…/template/persistent/customer/form/login.phtml（模板的不同相应的文件可能会不一样）

1. <input type="text" name="login[username]" value="<?php echo $this->htmlEscape($this->getUsername()) ?>" id="email" class="input-text required-entry validate-email" title="<?php echo $this->__('Email Address') ?>" />
   
2. <!---在下面新增类容--->
   
3. <div id="MailAutoTip" class="mailAutoTip"> </div><!----- 此div是必须要有的---->
   
4. <script type="text/javascript">
   
5. jQuery(function($){  
   
6.         $("#email").mailAutoTip();
   
7. });
   
8. //此方法是赋予id为“emial”的输入框以mailAutoTip效果 在其他地方调用只需修改对应的id属性
   
9. </script>

复制代码

最后附加css （参考）

1. .mailAutoTip {
   
2.         background: none repeat scroll 0 0 #fff;
   
3.         border: 1px solid #ccc;
   
4.         display: none;
   
5.         position: absolute;
   
6.         width: 254px;
   
7.         z-index: 100
   
8. }
   
9. 
   
10. #MailAutoTip li {
    
11.         height: 24px;
    
12.         margin: 0;
    
13.         line-height: 24px
    
14. }
    
15. 
    
16. #MailAutoTip li a {
    
17.         display: block;
    
18.         overflow: hidden;
    
19.         padding-left: 5px;
    
20.         width: 245px;
    
21.         color: #333
    
22. }
    
23. 
    
24. #MailAutoTip li a:hover,.mailAutoTip li.on a {
    
25.         background: none repeat scroll 0 0 #00388a;
    
26.         color: #fff;
    
27.         text-decoration: none
    
28. }

复制代码

寻找了好长时间这段js代码是最好用的，简单轻量级，兼容ie7以上 firefox chrome，欢迎大家测试。

zgknrv

温暖在你心里，只是你自己还没有发现它。',

relaspr

想你念你，魔扣源码论坛，在心里！

漂来荡去

太漂亮的源码了，非常感谢魔扣源码论坛

十字路口

欢迎你，亲爱的朋友，欢迎您光临并留下美好的祝福。相信通过网络的交流，我们会从陌生到相识相知，不断增进彼此信任，友谊会不断加深，这是我们前世修来的缘分。让我们珍惜这份缘，魔扣源码论坛愿我们友谊永存！

VFfmtHCO

谢谢好朋友！因电脑出故障了，没能及时回复，抱歉！只想轻轻地告诉您。魔扣源码论坛，我一直在惦记您。世界上最永恒的幸福是平凡，人生中最长久的拥有是珍惜。珍惜人与人之间的真情，珍惜生命，珍惜健康。珍惜点点滴滴的快乐，珍惜网络中遇见的您——我的朋友！