Java,Jsp,模式及框架
Web技术
Web服务器
浏览器相关
SQL语言
数据库
开发环境
软件开发及管理
网站SEO
短信及邮件服务
网页设计
电脑、硬件及网络
协同管理平台问题
电子商务
前沿技术及趋势
  当前位置:首页 - 知识积累 - 短信及邮件服务
邮箱ajax提示收、发件人
时间:2010年08月19日 

首先创建一个输入框: 

"input" id="names" title="发给多人时地址以英文逗号隔开" tabIndex="2" class="txt input_wd " style="padding- right: 29px; height: 22px; word-break: break-all; padding-top: 3px;" type="text" size="100" autocomplete="off" name="emailTo_nouse" onkeydown="findNames();" onkeyup="postUrl(this,'findEmail.jsp?');" onblur="hideNames();" value=""/>

onkeydown:这里所执行的方法是用来判断是否按的是特殊的键(向上键、向下键、退格键、Enter)

onkeyup:把所有的要提示的内容即()提交到后台findEmail.jsp中与所输入得内容进行匹配

onblur:失去焦点时不显示提示内容

 其次再上面的输入框所在的jsp中添加以下代码用来显示提示内容

"div" id="popup" style="position: absolute; overflow-y: scroll; background-color: #eff5fb"> "div align="center" "table" id="name_table" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="0"" "tbody id="name_table_body" class="westFont">

最后就是写javaScript来选择提示的内容

下面是所有调用的javaScript:

if(document.getElementById("names")) {
 document.getElementById("names").rows = "2";
  document.getElementById("names").onkeydown = findNames;
}
//下拉的层
completeDiv = document.getElementById("popup");

var inputField;
var nameTable;
var completeDiv;
var nameTableBody;
var receivervalue = "";
var names;
var k;
var k1;
var k2;
var m=0;//标识是否按了向下键
var m1=0;
var m2=0;
var n=0;//标识是否按了向上键
var n1=0;
var n2=0;
var number=0;//定义按键次数
var url;
var email;
function initVars() {
    //输入文本框
    inputField = document.getElementById("names");
      if(document.getElementById("names")) {
     receivervalue = inputField.value;
      }
      //层中的表格
    nameTable = document.getElementById("name_table");
  
    //表格中的表主体
    nameTableBody = document.getElementById("name_table_body");
   // completeDiv.style.display = "block";
  }
  
     function findNames(){
      var e = window.event;
      //按向下键
      if(e.keyCode==40) {
       if(n==0){
        if(k>1&&k<=names.length) {
         if(document.getElementById((k-1)+""))
         document.getElementById((k-1)+"").className = 'mouseOver';
         if(document.getElementById(k+""))
                document.getElementById(k+"").className = 'mouseOut';
                inputField.onblur=hideNames;
        }
        if(k==1){
         if(document.getElementById(k+""))
             document.getElementById(k+"").className = 'mouseOver';
             if(document.getElementById((k+1)+""))
                    document.getElementById((k+1)+"").className = 'mouseOut';
                    inputField.onblur=hideNames;
                    k++;
        }
           if(k>names.length) {
//            if(document.getElementById(k+""))
//             document.getElementById(k+"").className = 'mouseOver';
//            if(document.getElementById((k+1)+""))
//             document.getElementById((k+1)+"").className = 'mouseOver';
            if(document.getElementById((k-1)+""))
             document.getElementById((k-1)+"").className = 'mouseOver';
            k = 1;
            if(document.getElementById(k+""))
            document.getElementById(k+"").className = 'mouseOut';
            inputField.onblur=hideNames;
            document.getElementById("popup").scrollTop = 0;
           }
           if(k>10) {
            document.getElementById("popup").scrollTop = ((k-10)*20);
           }
           k++;
       }else {
        if(k>1&&k<=names.length) {
         if(document.getElementById((k-1)+""))
         document.getElementById((k-1)+"").className = 'mouseOver';
         if(document.getElementById(k+""))
                document.getElementById(k+"").className = 'mouseOut';
                inputField.onblur=hideNames;
                var s;
                   for(var h=0;h                          var text = document.getElementById((h+1)+"");
                         if(text&&text.className == 'mouseOut') {
                          s = h;break;
                         }
                        }
                   var j = document.getElementById("popup").scrollTop/20;
                   if(s(j+9))
                    document.getElementById("popup").scrollTop = (k-10)*20;
        }if(k==1){
         if(document.getElementById(k+""))
             document.getElementById(k+"").className = 'mouseOver';
             if(document.getElementById((k+1)+""))
                    document.getElementById((k+1)+"").className = 'mouseOut';
                    inputField.onblur=hideNames;
                    k++;
        }
           if(k>names.length) {
            if(document.getElementById(names.length+""))
                document.getElementById(names.length+"").className = 'mouseOver';
            k = 1;
            if(document.getElementById(k+""))
            document.getElementById(k+"").className = 'mouseOut';
            inputField.onblur=hideNames;
            document.getElementById("popup").scrollTop = 0;
           }
           
           k++;
       }
           m++;
          }
      //按向上键
          else if(e.keyCode==38) {
           if(m>0) {
            if(k>2) {
          if(document.getElementById((k-1)+""))
                 //去掉第一行和最后一行的颜色
                 document.getElementById("1").className = 'mouseOver';
                 if(document.getElementById(names.length+""))
                 document.getElementById(names.length+"").className = 'mouseOver';
          if(document.getElementById((k-1)+""))
                 document.getElementById((k-1)+"").className = 'mouseOver';
             if(document.getElementById((k-2)+""))
                 document.getElementById((k-2)+"").className = 'mouseOut';
                inputField.onblur=hideNames;
                var s;
                   for(var h=0;h                          var text = document.getElementById((h+1)+"");
                         if(text&&text.className == 'mouseOut') {
                          s = h;break;
                         }
                        }
                   var j = document.getElementById("popup").scrollTop/20;
                   if(s(j+10)){
                    document.getElementById("popup").scrollTop = s*20;
                   }
                k--;
        }
        else {
         k = names.length;
         if(document.getElementById((k-1)+""))
             //去掉第一行的颜色
            document.getElementById("1").className = 'mouseOver';
         if(document.getElementById(k+""))
         document.getElementById(k+"").className = 'mouseOut';
        inputField.onblur=hideNames;
        document.getElementById("popup").scrollTop = document.getElementById("popup").scrollHeight;
        }
           }else {
            if(k==1) {
             k = names.length;
             document.getElementById("popup").scrollTop = document.getElementById("popup").scrollHeight;
             if(document.getElementById((k-1)+""))
                 //去掉第一行的颜色
                document.getElementById("1").className = 'mouseOver';
             if(document.getElementById(k+""))
             document.getElementById(k+"").className = 'mouseOut';
            inputField.onblur=hideNames;
            }else {
             if(k               var st = document.getElementById("popup").scrollHeight;
              document.getElementById("popup").scrollTop = st-(((names.length-k)+2)*20);
             }
             k--;
             if(document.getElementById((k+1)+""))
             document.getElementById((k+1)+"").className = 'mouseOver';
             if(document.getElementById(k+""))
                document.getElementById(k+"").className = 'mouseOut';
            inputField.onblur=hideNames;
            
            }
            
           }
           
            n++; 
          }
          else if(e.keyCode==13) {
           for(var h=0;h             var text = document.getElementById((h+1)+"");
            if(text&&text.className == 'mouseOut') {
             populateName(text);
            }
           }
           //if(k>1)
           //var text = document.getElementById((k-1)+"");
           //if(text)
           //populateName(text);
          } 
          else if(e.keyCode==8) {
       if(receivervalue.substring(receivervalue.length-1)==",") {
        receivervalue = receivervalue.substring(0, receivervalue.length-1);
        receivervalue = receivervalue.substring(0, (receivervalue.lastIndexOf(",")+1));
        //alert(receivervalue);
        inputField.value = receivervalue+",";
       }
      }
     }
function upFindNames() {
 number=0;
 var e = window.event;
 if (e.keyCode == 40) {
 } else if (e.keyCode == 38) {
 } else if (e.keyCode == 13) {
 } else {
  //alert("email:"+email);
  //alert("url:"+url);
  initVars();
  if (inputField.value != null && inputField.value != "") {
   if (inputField.value.lastIndexOf(",") > -1) {
    var s = inputField.value.substring(inputField.value
      .lastIndexOf(",") + 1);
    if (s != null && s != "") {
     url = url+ "value=" + inputField.value;
     findEmailNames(url,email,number);
    } else {
     clearNames();
    }
   } else {
    url = url + "value=" + inputField.value;
       findEmailNames(url,email,number);
   }
  } else {
   clearNames();
  }
 }
}
   
     
       // 回调函数
     function callback(Emails){
       //清除表格原有的内容
     clearNames();
     //滚动条置顶
     document.getElementById("popup").scrollTop = 0;
     completeDiv.style.display = "block";
     var el = Emails.lastIndexOf(",");
     Emails = Emails.substring(0,el);
     var the_names = Emails.split(",");
     names = the_names;
    
     var size = the_names.length;
     //alert("size"+size);
     //设置表格的位置
     setOffsets();
   
     //单元格的行,列,文本节点
     var row, cell, txtNode;
     for (var i = 0; i < size; i++) {
       //名字的内容
       var nextNode = the_names[i];
       //alert("nextNode:"+nextNode);
       //建立一行
       row = document.createElement("tr");
       cell = document.createElement("td");
        //设置单元格的属性
       cell.setAttribute("bgcolor", "#FFFFFF");
       cell.setAttribute("border", "0");
       cell.setAttribute("id",(i+1)+"");
       cell.setAttribute("height","20px");
       //匿名函数
       cell.onmouseout = function() {this.className = 'mouseOver';inputField.onblur=hideNames;} ;
       cell.onmouseover = function() {
        this.className = 'mouseOut';
        for(var j=0;j          if(this.id == j) {
          this.className = 'mouseOut';
          k = j+1;
         }
         else {
          if(document.getElementById((j+1)+"")) {
           var text = document.getElementById((j+1)+"");
               text.className = 'mouseOver';
          }
         }
            }
            inputField.onblur=null;
       };
    
       //for(var j=0;j        // var text = document.getElementById((j+1)+"");
           // if(text&&text.className == 'mouseOut') {
           //  k = j+1;
           //  break;
           // }
           // else k=1;
       //}
       k=1;
       //点击,选到文本框中
       cell.onclick = function() {populateName(this);};
   
       txtNode = document.createTextNode(nextNode);
       //文本加到单元格
       cell.appendChild(txtNode);
       //单元格加到表格行
       row.appendChild(cell);
       //行加到表格
       nameTableBody.appendChild(row);
       //alert(nameTableBody.innerHTML);
       if(i==0) {
        document.getElementById((i+1)+"").className = "mouseOut";
       }
     
     }
     }
    
  
  function calculateOffsetLeft(field) {
    return calculateOffset(field, "offsetLeft");
  }
  
  function calculateOffsetTop(field) {
    return calculateOffset(field, "offsetTop");
  }
  
  //计算位置的函数:元素,属性
  function calculateOffset(field, attr) {
    var offset = 0;
    while (field) {
      //文本框[属性],这种写法得到当前元素相对于父元素的偏移值
      offset += field[attr];
      field = field.offsetParent;
    }
    return offset;
  }
   
  function populateName(cell) {
    //inputField.onblur = function () {completeDiv.style.display = "block";};
   if(receivervalue) {
      //选中的单元格的值放到文本框中
      if(receivervalue.indexOf(",")==-1){
       inputField.value = "";
       inputField.value += cell.firstChild.nodeValue+",";
      receivervalue = inputField.value;
       inputField.focus();
       var r =inputField.createTextRange();
       r.moveStart('character',inputField.value.length);
       r.collapse(true);
       r.select();
      }else {
       var ii = receivervalue.lastIndexOf(",");
       inputField.value = receivervalue.substring(0,ii+1);
       if(cell.firstChild.nodeValue=="") receivervalue ="";
       else {
        inputField.value += cell.firstChild.nodeValue+",";
        receivervalue = inputField.value;
       }
       inputField.focus();
       var r =inputField.createTextRange();
       r.moveStart('character',inputField.value.length);
       r.collapse(true);
       r.select();
      }
     clearNames();
   }
  }
      
  function clearNames() {
    //有多少行
    if(nameTableBody) {
     var ind = nameTableBody.childNodes.length;
    for (var i = ind - 1; i >= 0; i--) {
      //删除每一行
      nameTableBody.removeChild(nameTableBody.childNodes[i]);
    }
    //层的外框
    completeDiv.style.border = "none";
    }
   
  }
  function hideNames() {
   completeDiv.style.display = "none";
  }
  function postUrl(obj,ajaxUrl) {
   email = ajaxUrl.substring(ajaxUrl.indexOf("?")+1);
   url = ajaxUrl.substring(0,ajaxUrl.indexOf("?")+1);
   if(obj.id=="names")
   upFindNames();
   else if(obj.id=="names1"){upFindNames1();}
   else if(obj.id="mobilePhone") upFindNames2();
  }
  function returnAjaxValue(value,number) {
   value = value.replace(/\n/g,"").replace(/\r/g,"");
   if(number==0) {
    if(value!="") callback(value);
    else completeDiv.style.display = "none";
   }
   else if(number==1) {
    if(value!="") callback1(value);
    else completeDiv.style.display = "none";
   }
   else if(number==2){
    if(value!="") callback2(value);
   }
  }
  function getFocus() {
   //alert("ss");
   document.getElementById("mobilePhone").focus();
  }