如何实现126邮箱的收件人的地址栏效果

扩展autocomplete 要你自己实现
推荐 yui

jQuery 中有现成的插件

http://topic.csdn.net/u/20080116/09/6d9a7adf-34e9-411f-a084-f7a13ea6fb9e.html
效果方面一样，就是你的数据需要利用ajax来获得数据库的内容

1，输入字母，自动提示:ajax发送请求
2，可以输入多个，并且每个都能像上面一样提示：一样
3，地址栏可以根据输入人数的增多而变大：可以js实现
4，每个地址都是用逗号隔开，并且是自动完整：也可以js实现

jQuery有AutoComplete的插件．
不过我感觉作得都不是太好．你可以看看行不行用．

闲得无聊下写的,可以参考,没使用ajax,使用asp生成js数组来处理
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=gb2312" />
  <title>126</title>
  <style type="text/css">
    .focus{background-color:#AFDBFF}
    div{color:blue}
    body{font-size:10pt}
  </style>
</head>
<body>
   <script type="text/javascript">
   //我想数据量应该不是很大（300条以上时可以考虑用ajax），这样把这里改为你的服务器生成下面格式的js数组
   var link=[["张三","[email protected]"],["王五","[email protected]"],["赵六","[email protected]"],["小张","[email protected]"]
   ,["小李","[email protected]"],["张龙","[email protected]"],["赵虎","[email protected]"]];
   //asp的话可以参考下面的代码,这段代码要放到<script>标签里面
   /*
   dim jsArr:jsArr="var link=["&vbnewline
   dim rs
   '取你数据集合的代码
   if not(rs.eof or rs.bof) then'有数据时
     '这里先取一条数据，这样好连接数组
     jsArr=jsArr&"["""&rs("name)"&""","""&rs("email)"&"""]"
     rs.movenext'====移到下一条
     do while not rs.eof'=====取所有数据生成数组
       jsArr=jsArr&",["""&rs("name)"&""","""&rs("email)"&"""]"
       rs.movenext
     loop
   end if
   jsArr=jsArr&"]"'=========完成数组
   response.write jsArr'=========输出数组
   */
   var ts=null;
   var addr,email;
   window.onload=function()
   {
     addr=document.getElementById("addr");
     email=document.getElementById("email");
     var point=getDivPosition(email);
     addr.style.left=point.x+"px";
     addr.style.top=point.y+"px";
   }
   function getDivPosition(o)
   {
     var point=new Object();
     point.x=o.offsetLeft;
     point.y=o.offsetTop+o.offsetHeight;
     while(o=o.offsetParent)
     {
       point.x+=o.offsetLeft;
       point.y+=o.offsetTop;
     }
     return point;
   }
   function getEmail(e,v)
   {
     e=e||event;
     if(e.keyCode==27||e.keyCode==13||e.keyCode==38||e.keyCode==40)//为自定义的快捷键时退出
       return;
     if(v!="")
     {
       if(/^ +$/g.test(v))//输入空格，输出所有地址
       {
         displayAll();
       }
       else if(/^[a-bA-Z0-9]+$/gi.test(v))//按email搜索
       {
         if(ts!=null)
           clearTimeout(ts);
         ts=setTimeout("displaySearch(1,'"+v.replace(/'/g,'\'')+"')",500);//延时500ms查询
       }
       else if(/^[\u4E00-\u9FFF]+$/gi.test(v))//输入汉字，按姓名搜索
       {
         if(ts!=null)
           clearTimeout(ts);
         ts=setTimeout("displaySearch(0,'"+v.replace(/'/g,'\'')+"')",500);//延时500ms查询
       }
     }
   }
   function displaySearch(type,v)
   {
     var First=true;
     var data="";
     for(var i=0;i<link.length;i++)
     {
         if(link[i][type].indexOf(v)==0)
         {
           if(First)
           {
             First=false;
             data+='<div onclick="setTxt(this.innerHTML)" class="focus">"'+link[i][0]+'"<'+link[i][1]+'></div>';
           }
           else
             data+='<div onclick="setTxt(this.innerHTML)">"'+link[i][0]+'"<'+link[i][1]+'></div>';
         }
     }
     addr.innerHTML=data;
     addr.style.display="";
   }
   function displayAll()
   {
     var data="";
     for(var i=0;i<link.length;i++)
     {
       if(i==0)
         data+='<div onclick="setTxt(this.innerHTML)" class="focus">"'+link[i][0]+'"<'+link[i][1]+'></div>';
       else
         data+='<div onclick="setTxt(this.innerHTML)">"'+link[i][0]+'"<'+link[i][1]+'></div>';
     }
     addr.innerHTML=data;
     addr.style.display="";
   }
   function setTxt(v)
   {
     v=v.replace("<","<").replace(">",">");
     email.value=v;
     //Opera的话会把"变为"，只好替换回来了..
     if(/opera/gi.test(navigator.userAgent))
       email.value=email.value.replace(/"/gi,"\"");
     email.focus();
     addr.style.display="none";
   }
   document.onkeydown=function(e)
   {
     e=e||event;
     if(e.keyCode==27)//esc键
       addr.style.display="none";
     else
     {
       if(addr.style.display!="none")
       {
         var divs=addr.getElementsByTagName("div");
         for(var i=0;i<divs.length;i++)
         {
             if(divs[i].className=="focus")
             {
                if(e.keyCode==38)//向上键
                {
                    var preDiv=divs[i-1];
                    if(preDiv!=null)
                    {
                      divs[i].className="";
                      preDiv.className="focus";
                      return;
                    }
                 }
                 else if(e.keyCode==40)//向下键
                 {
                    var nextDiv=divs[i+1];
                    if(nextDiv!=null)
                    {
                      divs[i].className="";
                      nextDiv.className="focus";
                      return;
                    }
                 }
                 else if(e.keyCode==13)//enter键
                 {
                   setTxt(divs[i].innerHTML);
                   return;
                 }
              }
           } //end for
        }
      }
   }//end document.onkeydown
   </script>
   Email:<input type="text" id="email" onkeyup="getEmail(event,this.value)" style="height:20px;width:200px"/>
   <div id="addr" style="display:none;position:absolute; background-color:#eeeeee"></div>
</body>
</html>

调试易

如何实现126邮箱的收件人的地址栏效果

解决方案 »