ajax + java 实现类似网易邮箱邮件地址自动完成功能.(附源码)

图片截图显示不正常的话可以转到:
http://hi.baidu.com/yidwo/blog/item/3e2b44d4f8b87505a08bb766.html

用java+ajax做的一个类似于google输入栏版提示的ajax小功能.

稍改进了下.现在类似于163.126的邮件地址自动完成功能.

结构描述:
1.前台页面: autoComplete.js autoComplete.jsp
2.配置: 把web.xml文件的内容配置到你web工程的web.xml文件.
3.后台程序及源码: 在com文件夹下.

运行: 在tomcat中打开autoComplete.jsp,键入字符a , y ,g都可以弹出.
要想内容更丰富.
请您自己完善.
在IE和firefox 下测试通过.

演示截图:

IE:




Firefox:

// JavaScript Document
  var xmlHttp;
  var completeDiv;
  var nameTable;
  var nameTableBody;
  var inputField;
  var divIframe;
   var isDivShow = false;  //2007-12-23
  var inTbodyLineNO = -1;  //2007-12-23
  
  function createXMLHttpRequest(){
      if(window.ActiveXObject){
	      xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")
	  }else if(window.XMLHttpRequest){
          xmlHttp = new XMLHttpRequest();
	  }
 }
 function initVars(){
     nameTableBody = document.getElementById("name_table_body");
	 nameTable = document.getElementById("name_table");
	 completeDiv = document.getElementById("popup");
	 inputField = document.getElementById("names");
	 divIframe = document.getElementById("diviframe");
 }
 
 /* post  html 页面 调用接口,此方法异步调用Servlet方法 AutoCompleteServlet */
 function findNames(e){  //alert("00000");
     initVars();
	 if(e.keyCode!=40 && e.keyCode!=38 && e.keyCode!=13 && e.keyCode!=27)
	 {
	     if(inputField.value.length > 0)
		 {  
	      	 createXMLHttpRequest();
			 var url = "/AutoCompleteServlet";
			 var postPara = "names="+inputField.value;
			 postPara = encodeURI(postPara);
			 postPara = encodeURI(postPara);
			 xmlHttp.open("post",url,true);  
             xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			 xmlHttp.send(postPara);
			 xmlHttp.onreadystatechange = callback;
	     }else
		 {
		     clearNames(); 
	     }
	 }
	 
 }
 
 /* setNames 方法处理返回回来的数据 */
 function callback(){           
     if(xmlHttp.readyState == 4){          // alert("status: "+xmlHttp.status+"   text: "+xmlHttp.statusText);
		 if(xmlHttp.status == 200){
			 setNames(xmlHttp.responseXML.getElementsByTagName("name"),xmlHttp.responseXML.getElementsByTagName("value"));
			
		 }else{
			 clearNames();	
			 alert("Exception-status: "+xmlHttp.status+"   text: "+xmlHttp.statusText); 
		 }
	 }	 
 }
 
  function setNames(the_names,the_values){
	 clearNames();	 
	 var size = the_names.length;      //alert(size);
	 setOffsets();
	 
	 var row,cell,txtNode;
	 for(var i=0;i<size;i++){
		 isDivShow = true;
		 var nextNode = "\""+the_names[i].firstChild.data+"\" <"+the_values[i].firstChild.data+">";
		 
		 row = document.createElement("tr");
		 cell = document.createElement("td");
		 
		 cell.onmouseout = function(){this.className='mouseOver';};
		 cell.onmouseover = function(){this.className='mouseOut';};
		 cell.setAttribute("bgcolor","#FFFAFA");
		 cell.setAttribute("border","0");
		 cell.onclick = function(){populateNames(this);};
		 
		 divIframe.style.display="";
		 txtNode = document.createTextNode(nextNode);
		 cell.appendChild(txtNode);
		 row.appendChild(cell);
		 nameTableBody.appendChild(row);
		 
		 if(inTbodyLineNO == -1)
	     {
			inTbodyLineNO = 0;
			nameTableBody.rows[inTbodyLineNO].cells[0].className = "mouseOut";
	     }
	 }
 } 
 
 // div 的显示位置设置
 function setOffsets(){
	var end = inputField.offsetWidth/2;
	var left = calculateOffsetLeft(inputField);
	var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
	
	completeDiv.style.border = "black 1px solid";
	completeDiv.style.left = left + "px";
	completeDiv.style.top = top + "px";
	nameTable.style.width = end + "px";
	divIframe.style.border="none";
 }
 
 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 populateNames(cell){
     var oldInputValue = inputField.value.substring(0,inputField.value.lastIndexOf(",")+1);
	 var newInputValue = cell.firstChild.nodeValue;
	 if(oldInputValue.indexOf(newInputValue) > -1)
	 {
		  inputField.value = oldInputValue;
	 }else
	 {
	      inputField.value = oldInputValue + newInputValue+",";
	 }
		 
     clearNames();
 }
 
 // 清空操作
 function clearNames(){
     var ind = nameTableBody.childNodes.length;
     for(var i = ind - 1; i >= 0; i--){
         nameTableBody.removeChild(nameTableBody.childNodes[i]);
     }
     divIframe.style.display="none";
     completeDiv.style.border = "none";
     inTbodyLineNO = -1;  //2007-12-23
	 isDivShow = false;  //2007-12-23
 } 
 
 function getKeyCode(oEvent)
 { 
    /* if(oEvent.keyCode!=40 && oEvent.keyCode!=38 && oEvent.keyCode!=13 && oEvent.keyCode!=27)
	 {
		 //window.setTimeout("findNames()",2000); 
		 findNames();
	 } */
    
	if(isDivShow)  // 如果自动完成的层显示出来了
	 {
		 if(oEvent.keyCode == 40)
	     {
	         MoveCursor(1);
	     }else if(oEvent.keyCode == 38)  // 
	     {
	         MoveCursor(-1);
	     }else if(oEvent.keyCode == 13)  // enter
	     {
	         selectValue();
//			 oEvent.keyCode=9;
	     }else if(oEvent.keyCode == 27)  // esc
	     {
	         clearNames();
	     }
	 }
	 
	 
	 
  }
 
   //2007-12-23
 function MoveCursor(nFlag)
 {
		var lineNum = nameTableBody.rows.length;   //alert(lineNum);
		nameTableBody.rows[inTbodyLineNO].cells[0].className = "mouseOver";
		inTbodyLineNO = (inTbodyLineNO + nFlag + lineNum) % lineNum;
		nameTableBody.rows[inTbodyLineNO].cells[0].className = "mouseOut";
		nameTableBody.rows[inTbodyLineNO].cells[0].scrollIntoView(true);
 }

  //2007-12-23
 function selectValue()
 {
	  if(inTbodyLineNO == -1)
	  {
		   return;  
	  }else
	  {
		  populateNames(nameTableBody.rows[inTbodyLineNO].cells[0]);
	  }
 }
 
 
 
 
 

代码内有详细的注释.在这里就不详述.

评论

2 楼 boy in the road 2008-06-13  

过来学习了

1 楼 qiuwenb 2007-12-25  

运行有错误，