百度建议给了我们极大的方便，就像我们跟人说话的时候，你点头他知尾，不用多费唇舌，这样我们与之相处久轻松愉悦。

都知道百度建议是用ajax做的，想要做的快速稳定，可复制可移植就不容易了。网上找了半天，好多都是asp或者php的，还有使用jquery的，但说明性文档太少，花时间研究还不如自己来写。根据一个pdf文档提供的资料，用了小半天时间，终于实现了。在此与大家分享。

原理流程图如下：

流程图很明白了，没什么要说的，以下帖代码。

Javascript代码：

var xmlHttpRequest;
	var table;
	var tbody;
	var div;
	var input;
	var curIndex;
	var size;
	var r_userId;
	function createXMLHttpRequest(){
		if(window.ActiveXObject){
			xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}else if(window.XMLHttpRequest){
			xmlHttpRequest = new XMLHttpRequest();
		}
	}
	//发送请求
	function findNames(){
		if(event.keyCode==38||event.keyCode==40){
		}else{
			if(input.value.length>0){
			createXMLHttpRequest();
			var url = encodeURI(encodeURI("/jforum.html?module=posts&action=findDept&names="+input.value));
			xmlHttpRequest.open("GET",url,true);
			xmlHttpRequest.onreadystatechange=processMatchResponse;
			xmlHttpRequest.send(null);
			}else{
				clearNames();
			}
		}
		
	}
	function processMatchResponse(){
		if(xmlHttpRequest.readyState==4){
			if(xmlHttpRequest.status==200){
			//alert(xmlHttpRequest.status);
				//var id = xmlHttpRequest.responseXML.getElementsByTagName("id");
				var dept = xmlHttpRequest.responseXML.getElementsByTagName("dept"); 
				var id = xmlHttpRequest.responseXML.getElementsByTagName("id"); 
				
				setNames(dept,id);
				
			}else{
				window.alert("您所请求的页面有异常！");
			}
		}
	}
	function setNames(depts,ids){
		clearNames();
		size = depts.length;
		if(size>0){
			div.style.visibility = "visible";

			var row,col1,col2,span;
			
			for(var i = 0;i < size;i++){
				row = document.createElement("tr");
				col1 = document.createElement("td");
				col1.innerText = depts[i].firstChild.data;
				col2 = document.createElement("td");
				col2.setAttribute("align","right"); 
				col2.setAttribute("id","col2");
				col2.setAttribute("width","5%");
				span = document.createElement("span");
				span.innerText = ids[i].firstChild.data;
				span.style.display = "none";
				col2.appendChild(span);
								
				
				row.appendChild(col1);
				row.appendChild(col2);
				row.onmouseout = function(){
					this.className = 'mouseOut';
				}
				row.onmouseover = function(){
					clearSelected();
					this.className = 'mouseOver';
					curIndex = this.rowIndex;
				}
				row.onclick = function(){
					input.value = this.cells[0].innerText;
					r_userId.value = table.rows[curIndex].cells[1].innerText;
					clearNames();
				};
				tbody.appendChild(row);
			}
			row = document.createElement("tr");
			col2 = document.createElement("td");
			col1 = document.createElement("td");
			col2.setAttribute("align","right");
			link = document.createElement("a");
			link.href = "javascript:clearNames();";
			link.innerHTML = "关闭";
			col1.appendChild(link);
			row.appendChild(col1);
			row.appendChild(col2);
			tbody.appendChild(row);
		}
	}

	function setPosition(){
		input = document.getElementById("names");
		r_userId = document.getElementById("r_userId");
		table = document.getElementById("table");
		div = document.getElementById("div");
		tbody = document.getElementById("tbody");
		
		div.style.width = input.offsetWidth-2;
		div.style.border = "gray 1px solid";
		div.style.left = getLeft(input);
		div.style.top = getTop(input)+input.offsetHeight+6;
		
		curIndex = -1;
		input.focus();//div.style.left+","+div.style.top
		}
	function clearNames(){
		var ind = tbody.childNodes.length;
		for(i=ind-1;i>=0;i--){
			tbody.removeChild(tbody.c