JSP中用Ajax实现自动补全功能

Question

求在JSP中用Ajax实现类似百度搜索自动补全的源码！！

Answer 1

var xhru = null;
var xhru=null;
var begin = 0; //循环移动自动完成的列表时的起点
var index = -1;//被选中值的位置
var currentrow=0;//移动前被选中的值的位置
var end = 0;   //循环移动自动完成的列表时的终点
var arr = new Array();//自动完成的值的列表
var state="false";//是否有值被选中
function check(){
//得到输入值
var s = document.all.myForm.name.value;
//alert(event.keyCode);

if(event.keyCode==37||event.keyCode==39){
//如果为左右移动的方向键，取消自动完成
clear();
}else if(event.keyCode==38&&arr.length>1){
//当数组有值的时候，才可以移动
//如果为上键，则向上移动
index--;//向上移动，则位置减
if(index<0){
//如果位置小于起始位置，则设为从最下面往上移动
index=end;
}
//被选中的值所在的背景改变，之前的值的背景消失
document.getElementById("tt"+index).style.background="maroon";
document.getElementById("tt"+currentrow).style.background="none";
//此时，有值被选中
state = "true";
//这时，"移动前被选中的值的位置"就是你当前选中的位置
currentrow = index;
}else if(event.keyCode==40&&arr.length>1){
index++;
if(index>end){
index=0;
}
//在开始的时候，其实currentrow==index
document.getElementById("tt"+currentrow).style.background="none";
document.getElementById("tt"+index).style.background="maroon";
state = "true";
currentrow = index;
}else if((event.keyCode==32||event.keyCode==13)&&state=="true"){
//选中了值了（state==true） 按回车，空格即可输入
document.all.myForm.name.focus();
document.all.myForm.name.value = arr[currentrow];

clear();
}else if(s.replace(/^\s+|\s+$/g,'')!=""&&isOK()){
//内容改变（isOK），且文本框内有值时，查询并清空
clear();
xhru = new ActiveXObject("Microsoft.XMLHTTP");
url = "<%=path%>/user.do?method=assit&value="+s;
xhru.onreadystatechange = userback;
xhru.open("GET",url,true);
xhru.send(null);
} else if(s.replace(/^\s+|\s+$/g,'')==""){
//文本框内的内容清空后，关闭自动完成
clear();
}
}


function userback(){
if(xhru.readyState==4 && xhru.status == 200){
//window.open('show.jsp');
arr = xhru.responseText.split('%');
var str = "<table width='100%'>";
for(i=0;i<arr.length-1;i++){
str+="<tr><td id='tt"+i+"' "+
"onmouseover=\"doOver("+i+")\" "+
"onclick=\"doClick("+i+")\" >"+
arr[i]+"</td></tr>";
}
end = arr.length-2;
str+="</table>";
document.all.show.style.display = "block";
document.all.show.innerHTML = str;
}
}
function doOver(id){
for(i=begin;i<=end;i++){
document.getElementById("tt"+i).style.background="none";
}
state="true";
document.getElementById("tt"+id).style.background="maroon";
currentrow = id;
index=id;
}
function doClick(id){
document.myForm.name.value = arr[currentrow];
clear();
}
//状态清零
function clear(){
arr = new Array();
index=-1;
currentrow=0;
state="false";
document.all.show.innerHTML="";
document.all.show.style.display="none";
}
var a;
//键按下的时候获取文本框的值
function f(){
a = document.myForm.name.value;
}
//键松开的时候调用，检查文本框的内容是否改变
function isOK(){
var b = document.myForm.name.value;
return a!=b;
}
<tr>
<td colspan="2">用户名：</td>
</tr>
<tr>
<td colspan="2"><input type="text" name="name" class="editbox" size="10" onkeydown="f()" onkeyup="check()" /><br>
<div id="show"
style="position: absolute; direction: inherit; display: none; width: 100%; background: aqua;"></div>
</td>
</tr>
<tr>
<td colspan="2">密&nbsp;&nbsp;码：</td>
</tr>