都知道百度建议是用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.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(curindex<size-1){
if(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<string,string> 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("<res>");
iterator<map.entry<string, string>> it = usermap.entryset().iterator();
while(it.hasnext()){
map.entry<string, string> entry=(map.entry<string,string>)it.next();
out.write("<id>"+entry.getkey()+"</id>");
out.write("<dept>"+entry.getvalue()+"</dept>");
}
out.write("</res>");
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()，也可以根据自己框架的情况灵活改变。
更多ajax java 实现自动完成功能。