百度建议给了我们极大的方便，就像我们跟人说话的时候，你点头他知尾，不用多费唇舌，这样我们与之相处久轻松愉悦。
都知道百度建议是用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 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.childnodes[i]);
}
div.style.visibility=hidden;
curindex = -1;
}
function clearselected(){
var ind = tbody.childnodes.length;
for(var i = ind-1;i>=0;i--){
tbody.childnodes[i].classname = mouseout;
}
}
function keydown(){
if(div.style.visibility==visible){
if(event.keycode ==38){
if(curindex>=0){
table.rows[curindex].classname='mouseout';
curindex = curindex-1;
if(curindex>=0){
table.rows[curindex].classname = 'mouseover';
input.value = table.rows[curindex].cells[0].innertext;
r_userid.value = table.rows[curindex].cells[1].innertext;
}
}
}
if(event.keycode==40){
if(curindexif(curindex>=0){
table.rows[curindex].classname = 'mouseout';
}
curindex = curindex+1;
table.rows[curindex].classname = 'mouseover';
input.value = table.rows[curindex].cells[0].innertext;
r_userid.value = table.rows[curindex].cells[1].innertext;
}else{
table.rows[curindex].classname = 'mouseout';
curindex = -1;
}
}
}
}
//获取元素的纵坐标
function gettop(e){
var offset=e.offsettop;
if(e.offsetparent!=null) offset+=gettop(e.offsetparent);
return offset;
}
//获取元素的横坐标
function getleft(e){
var offset=e.offsetleft;
if(e.offsetparent!=null) offset+=getleft(e.offsetparent);
return offset;
}
代码太多，有点乱，没使用jquery，但更能显示作者的功底。以下分点阐述：
1，setposition()是用来初始化全局所需要的各个变量，所以在页面加载的时候就要先调用喽，比如在body的onload方法，或者其他方式都可以。
2，findnames()是操作ajax的方法，熟悉ajax的人都可以看明白，里面最主要的是要对参数进行二次编码encodeuri()，相应的在后台要进行解码。
3，processmatchresponse()是回调函数，用来处理从后台返回的数据，这里交给了setnames()来处理。
4，setnames中采用table方式显示提示的内容。这里更多的是js和node方面的知识。
5，gettop和getleft方法是获得文本框的绝对位置，相对于浏览器左上角的。
后台java代码如下：
复制代码 代码如下:
public void finddept() throws ioexception{
string partdeptname = this.request.getparameter(names);
partdeptname = java.net.urldecoder.decode(partdeptname, utf-8);
map usermap = dataaccessdriver.getinstance().newuserdao().getdeptbypart(% + partdeptname + %);
this.response.setcontenttype(text/xml;charset=utf-8);
this.response.setheader(cache-control, no-cache);
servletoutputstream pw = this.response.getoutputstream();
outputstreamwriter out = new outputstreamwriter(pw,utf-8);
out.write();
iterator> it = usermap.entryset().iterator();
while(it.hasnext()){
map.entry entry=(map.entry)it.next();
out.write(+entry.getkey()+);
out.write(+entry.getvalue()+);
}
out.write();
out.flush();
out.close();
}
要点：
1，注意对参数进行解码。
2，查询时根据情况进行模糊匹配。
3，返回数据这里采用了xml方式，也可以采用json方式。
4，返回的方式这里采用了
复制代码 代码如下:
servletoutputstream pw = this.response.getoutputstream();
outputstreamwriter out = new outputstreamwriter(pw,utf-8);
这样的流是受本系统框架的限制，如果使用单纯的servlet，可以采用printwriter out = response.getwriter();当然out的方法是println()，也可以根据自己框架的情况灵活改变。