挑选后缀 简化邮箱登录
技术与开发
阿伟登录搜狐网站的时候，发现在登录框中输入用户名便会出现一个用户名相同但邮箱后缀地址不同的下拉列表供他选择，他想把这个功能用到自己的网站上，以后用户注册时就可以方便地录入邮箱地址了。
要简化邮箱地址录入，可以设计一个邮箱后缀地址列表插件（插件下载地址：http://www.shudoo.com/bzsoft）。我们先要创建一个邮箱后缀地址表，里面包含了各大网站的邮箱后缀地址，然后通过程序给输入的邮箱名后面匹配邮箱后缀地址，并将匹配的结果写入下拉列表，这样用户就可以选择了。根据相似的原理，我们还可以设计自动匹配关键字的搜索功能。
第一步 创建邮箱后缀地址表
新建一个网页，在网页的〈body〉〈/body〉之间添加1个Div用来制作下拉列表，分别设置其属性Position的值为absolute（用来定位），属性Display的值为none（用来隐藏Div），相关代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：
〈span onmouseover="bk（this）" onclick="selectValue（）" 〉shudoo.com〈/span〉
〈span onmouseover="bk（this）" onclick="selectValue（）" 〉163.com〈/span〉
〈span onmouseover="bk（this）" onclick="selectValue（）" 〉yahoo.com〈/span〉
〈span onmouseover="bk（this）" onclick="selectValue（）" 〉yahoo.com.cn〈/span〉
〈span onmouseover="bk（this）" onclick="selectValue（）" 〉sina.com〈/span〉
〈span onmouseover="bk（this）" onclick="selectValue（）" 〉sina.com.cn〈/span〉
〈span onmouseover="bk（this）" onclick="selectValue（）" 〉sohu.com〈/span〉
第二步 匹配地址信息并生成下拉列表
邮箱后缀地址表有了，我们现在要做的就是将邮箱后缀地址列表匹配给用户并生成邮箱后缀地址下拉列表，当用户选中下拉列表中的某个完整邮箱地址时，该完整邮箱地址就自动写入输入框中。在〈body〉〈/body〉之间输入以下相关代码（完整代码下载地址：http://www.shudoo.com/bzsoft）：
var d=$（'emailList'）;//获取下拉列表对象
var em=$（'email'）;//获取输入框对象
d.style.width=parseInt（em.style.width）+'px';//设置下拉列表的宽度与输入框的宽度一致
d.style.top=getAbsPoint（em）+20+'px';//设置下拉列表的TOP值
d.style.left=getAbsPoint（em，'x'）+'px';//设置下拉列表的LEFT值
var str=em.value;//获取输入框中的文本信息
if（str.indexOf（'@'）>=0）{//判断输入信息中是否含有@字符
var strLast=str.substring（str.indexOf（'@'）+1）;//获取输入信息中@字符之后的文本，即邮箱地址后缀
str=str.substring（0，str.indexOf（'@'））;//获取输入信息中@字符之前的文本
}else{
var strLast=false;//如果输入信息中没有@字符，则输入信息中不包含邮箱地址后缀
}
var vs=d.getElementsByTagName（'span'）;// 获取下拉列表中所有的邮箱地址对象
var vsL=vs.length;
var temStr;
var bkC=0;//下拉列表中被选中的邮箱地址的编号
var isok=0;//下拉列表中是否有能匹配输入信息的邮箱地址，该变量值为0则没有，为1则有
for（var i=1;i〈vsL;i++）{
temStr=vs[i].innerHTML;//获取下拉列表中对应的邮箱地址信息
temStr=temStr.substring（temStr.indexOf（'@'）+1）;//获取邮箱地址中@字符之前的文本
if（strLast！=false）{
if（temStr.indexOf（strLast）<0）{//该邮箱地址后缀与输入的邮箱地址后缀不匹配则不显示该邮箱地址并将它设置为不选中状态（即背景颜色设置为#FFF）
vs[i].style.display='none';
vs[i].style.backgroundColor='#FFF'
continue;
}
}
isok=1;//下拉列表中已存在与输入信息匹配的邮箱地址
vs[i].innerHTML=str+'@'+temStr;//将匹配的邮箱地址后缀与输入信息进行整合
vs[i].style.display='block';
bkC=bkC==0？i:bkC;
bkC=（（vs[i].style.backgroundColor.toLowerCase（）=='#ffff66'） || （vs[i].style.backgroundColor.toLowerCase（）.indexOf（'102'）>0））？i:bkC;
}
第三步 加入触发功能的代码
完成了以上步骤后，我们还需要在输入框中加入触发功能的代码，分别在输入框的按键松开事件（onKeyUp事件）中调用disList（event）函数，在失去焦点事件中调用selectValue（）函数，具体代码如下所示：
〈input type="text" id="email" name="email" style="width:200px;height:20px; margin:0; padding:0;border:1px solid #CC9900;" value="” onkeyup="disList（event）;" onblur="selectValue（）;" />
编后
本文制作的邮箱后缀地址下拉列表插件，其主要目的是为了简化用户的操作。简单易学的操作不仅降低了用户的出错几率，还能减少用户对程序的干预，降低程序的故障率。很多网站提供的搜索、用户登录和注册等服务都有类似的信息提示功能。