Magento会员注册email下拉提示常用后缀

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

图片：hicoogle_magento_email.jpg

将主要的代码做成一个js文件在page.xml文件调用
js文件内容：
jQuery(function($) {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"); [color=#000-2]$.fn.mailAutoTip = function(options) { var setting = { subBox: "#MailAutoTip", //下拉框div subOp: "li", id: "#email , #email_address", //email输入框的id属性,在其他地方调用需要在此添加输入框属性. mailArr: [color=#000-2]mailArr, hoverClass: "on", _cur: 0 /*index*/ }; var opts = [color=#000-2]$.extend({}, [color=#000-2]setting, [color=#000-2]options || {}); //tipFun var tipFun = function(_v, o) { [color=#000-2]opts._cur = 0; var _that = [color=#000-2]o; [color=#000-2]$([color=#000-2]opts.subBox).show(); var str = "

"; [color=#000-2]str += "
[*] Please select email type:"; var e = [color=#000-2]_v.indexOf("@"); if ([color=#000-2]e == -1) { [color=#000-2]$.each([color=#000-2]opts.mailArr, function(s, m) { [color=#000-2]str += '
[*]' + [color=#000-2]_v + [color=#000-2]m + ""; }); } else { var _sh = [color=#000-2]_v.substring(0, [color=#000-2]e) var _se = [color=#000-2]_v.substring([color=#000-2]e); var ind = 0; [color=#000-2]$.each([color=#000-2]opts.mailArr, function(s, m) { if ([color=#000-2]m.indexOf([color=#000-2]_se) != -1) { [color=#000-2]str += '
[*]' + [color=#000-2]_sh + [color=#000-2]m + ""; [color=#000-2]ind = 1; } }); if ([color=#000-2]ind == 0) { [color=#000-2]str += '
[*]' + [color=#000-2]_v + ""; } } [color=#000-2]str += "

"; [color=#000-2]$([color=#000-2]opts.subBox).html([color=#000-2]str); /*hover*/ [color=#000-2]$([color=#000-2]opts.subBox).find([color=#000-2]opts.subOp).hover(function() { var _that = [color=#000-2]$([color=#000-2]this); [color=#000-2]_that.addClass([color=#000-2]opts.hoverClass); }, function() { var _that = [color=#000-2]$([color=#000-2]this); [color=#000-2]_that.removeClass([color=#000-2]opts.hoverClass) }); /*click*/ [color=#000-2]$([color=#000-2]opts.subBox).find([color=#000-2]opts.subOp).each(function() { [color=#000-2]$([color=#000-2]this).click(function(e) { if ([color=#000-2]$([color=#000-2]e.target).attr("id") != "e_type") { [color=#000-2]$([color=#000-2]opts.id).val([color=#000-2]$([color=#000-2]e.target).html()); [color=#000-2]$([color=#000-2]opts.subBox).hide(); [color=#000-2]e.stopPropagation(); } }); }) }; /*itemFun*/ var itemFun = function() { var _tempArr = [color=#000-2]$([color=#000-2]opts.subBox).find([color=#000-2]opts.subOp); var _size = [color=#000-2]_tempArr.size(); for (var i = 0; [color=#000-2]i < [color=#000-2]_size; [color=#000-2]i++) { [color=#000-2]_tempArr.eq([color=#000-2]i).removeClass([color=#000-2]opts.hoverClass); } if ([color=#000-2]_size > 1) { if ([color=#000-2]opts._cur > [color=#000-2]_size - 1) { [color=#000-2]opts._cur = 1; } if ([color=#000-2]opts._cur < 1) { [color=#000-2]opts._cur = [color=#000-2]_size - 1; } [color=#000-2]_tempArr.eq([color=#000-2]opts._cur).addClass([color=#000-2]opts.hoverClass); } else { [color=#000-2]opts._cur = 1; } }; [color=#000-2]$([color=#000-2]opts.id).keyup(function(e) { var _that = [color=#000-2]$([color=#000-2]this); if ([color=#000-2]_that.val() != "") { if ([color=#000-2]e.keyCode != 38 && [color=#000-2]e.keyCode != 40 && [color=#000-2]e.keyCode != 13 && [color=#000-2]e.keyCode != 27) { var _inputVal = [color=#000-2]_that.val(); [color=#000-2]tipFun([color=#000-2]_inputVal, [color=#000-2]_that); } } else { [color=#000-2]$([color=#000-2]opts.subBox).hide(); } }); [color=#000-2]$(document).bind("click", function(e) { [color=#000-2]$([color=#000-2]opts.subBox).hide(); }); [color=#000-2]$(document).keydown(function(e) { switch ([color=#000-2]e.keyCode) { case 40: //up [color=#000-2]opts._cur++; [color=#000-2]itemFun() break; case 38: //down [color=#000-2]opts._cur--; [color=#000-2]itemFun() break; default: break; } }) [color=#000-2]$([color=#000-2]opts.id).keydown(function(e) { var _temp = [color=#000-2]$([color=#000-2]opts.subBox).find([color=#000-2]opts.subOp); if ([color=#000-2]e.keyCode == 13) { if ([color=#000-2]opts._cur != 0) { [color=#000-2]$([color=#000-2]this).val([color=#000-2]_temp.eq([color=#000-2]opts._cur).text()); [color=#000-2]opts._cur = 0; } [color=#000-2]$([color=#000-2]opts.subBox).hide(); [color=#000-2]e.stopPropagation(); } }); }});比如在客户登录页面应用。
…/template/persistent/customer/form/login.phtml（模板的不同相应的文件可能会不一样）