AJAX自动提示,并添加有键盘上下选择功能

//2007.12.21 linjiasheng
//使用方法 searchdata(url,query,inputid),url格式/xxx.do,query格式method=xxx&query=xxx,inputid就是input TEXT的id名称
//URL就是连接数据库的地址,在后台要定义格式为"<data> <value></value> <label></label> </data>"的xml格式文本输出,<data>是多行输出的.
//inputid就是jsp页面的text的ID名称

document.write('<span id="draw_findInSelect"></span>');
var xmlHttp;

var arrA ; //全局的数组

var textinput;  //传入的text的ID名称
 
var index=0;     //所选的搜索值的位置 

var firsttime=0;

var selectedvalue=""; //键盘移动所选的值
function createXMLHttpRequest()
{
 if (window.ActiveXObject)
  {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest)
  {
     xmlHttp= new XMLHttpRequest();
  }
}
//主方法

function searchdata(url,query,inputid)
{
 
 
 if(window.event.keyCode==40){
   if(document.getElementById("searchLayer1")!=undefined){
  var datalength=document.getElementById("listtable").childNodes.item(0).childNodes.length;
    if(firsttime==0){
      index=0;
       clearsearchcss();
    }else{
  index =index+1;
 
    if(index>datalength-1){
    index=datalength-1;
    }
    }
     if(index-1>=0){
    var pre=index-1;
  prediv=document.getElementById("listtable").childNodes.item(0).childNodes.item(pre).childNodes.item(0).childNodes.item(1);
    prediv.style.cssText="color:windowtext;background:white;";
    }
    nexdiv=document.getElementById("listtable").childNodes.item(0).childNodes.item(index).childNodes.item(0).childNodes.item(1);
    idvalue=document.getElementById("listtable").childNodes.item(0).childNodes.item(index).childNodes.item(0).childNodes.item(0); 
    selectedvalue=idvalue.innerHTML;
  
 
    nexdiv.style.cssText="color:highlighttext;background:highlight;";
   
    if(index>0){
    document.getElementById("searchLayer1").doScroll("down");
    document.getElementById("searchLayer1").scrollTop +=nexdiv.offsetHeight-8;
    }
    firsttime=1;
    }
 }else if(window.event.keyCode==38){
    if(document.getElementById("searchLayer1")!=undefined){
    index=index-1;
    if(index<=0){
      index=0;
    }
 
  prediv=document.getElementById("listtable").childNodes.item(0).childNodes.item(index).childNodes.item(0).childNodes.item(1);
    prediv.style.cssText="color:highlighttext;background:highlight;";
    idvalue=document.getElementById("listtable").childNodes.item(0).childNodes.item(index).childNodes.item(0).childNodes.item(0); 
    selectedvalue=idvalue.innerHTML;
 
    var next=index+1;
  
    nexdiv=document.getElementById("listtable").childNodes.item(0).childNodes.item(next).childNodes.item(0).childNodes.item(1); 
    nexdiv.style.cssText="color:windowtext;background:white;";
   
  
   document.getElementById("searchLayer1").doScroll("up");
   document.getElementById("searchLayer1").scrollTop -=nexdiv.offsetHeight-8;
    }
  
 }else if(window.event.keyCode==13){
 
 
  if(document.getElementById("searchLayer1")!=undefined){
  var texts=document.getElementById(textinput);
 
  texts.value=selectedvalue;
  selectedvalue="";
  document.getElementById("draw_findInSelect").removeChild(document.getElementById("searchLayer1"));
  }
  firstime=0;
 }else{
  createXMLHttpRequest();
  textinput=inputid;
  xmlHttp.open("POST",url,true);
  xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
  xmlHttp.onreadystatechange=initdatahandle;
  xmlHttp.send(query);
 }
 
}
//数据返回控制
function initdatahandle()
{
 
  if (xmlHttp.readyState == 4)
 {
 
 if (xmlHttp.status == 200)
    {
   
 var data = xmlHttp.responseXML.getElementsByTagName("data");
 
 
 initArray(data);   //初始化数据

 
 createdivcss();     //建立DIV的CSS
 clearrow();     //清除之前在table的数据

 creatediv();     //在DIV中加入搜索的数据
 //假如返回的长度>0,显示DIV
 if(data.length>0){     
 
 document.getElementById("searchLayer1").style.display='block';
 firsttime=0;
 }else{
 document.getElementById("draw_findInSelect").removeChild(document.getElementById("searchLayer1"));
 
 }
 }
 }
}

function creatediv()
{

  var lay1=document.getElementById("searchLayer1");
  var texts=document.getElementById(textinput);
 
  var table=document.getElementById("listtable");

 
  var table_body =table.getElementsByTagName("tbody").item(0);

  for(var i=0;i<arrA.length;i++){

  if(arrA[i].value.indexOf(texts.value) >= 0 || arrA[i].label.indexOf(texts.value) >= 0){

    var new_row=createRow(arrA[i].value,arrA[i].label);
     table_body.appendChild(new_row);
   }
 }
 
 
}

function createdivcss(){

  var where=draw_findInSelect;
 
  var target=document.getElementById(textinput);
  var offset = parseInt(target.currentStyle.borderWidth);
  itop  = target.getBoundingClientRect().top + target.offsetHeight - offset;
  ileft = target.getBoundingClientRect().left - offset;
  iwidth = target.offsetWidth;
  iheight = target.offsetHeight;
  var divHTML='<div id="searchLayer1" style="top:'+itop+';left:'+ileft+';width:'+iwidth+';height:'+iheight+';height:100;background-color: #FFFFFF;overflow: auto;position:absolute;z-index:200;border: 1pt solid #000000;display:none;">'
  divHTML +='<table name="listtable" id="listtable" border="0" ><tbody><tr><td></td><tr></tbody></table></div>';
  where.innerHTML=divHTML;
 
}

function initArray(data)
{
arrA=new Array();

for(var i=0;i<data.length;i++){
arrA.push({value:data[i].childNodes[0].childNodes[0].nodeValue,label:data[i].childNodes[1].childNodes[0].nodeValue});
 }
}

function createRow(value,label)
{
 
  var row = document.createElement("tr");
  var cell = document.createElement("td");
  var div1 =document.createElement("<div style='display:none'/>");
  div1.innerHTML=value;
  var div2 =document.createElement("<div οnclick='selectvalue(this);' οnmοuseοver='selectFX(this)' style='width:100%'/>");
  div2.innerHTML=label;
 
  cell.appendChild(div1);
  cell.appendChild(div2);
  row.appendChild(cell);
 
  return row;

}

function clearrow()
{
 var table=document.getElementById("listtable");
  var table_tbody=table.childNodes.item(0);
  var rowlength=table_tbody.childNodes.length;
  
 
  for(var i=0;i<rowlength;i++){
  var table_tr=table_tbody.childNodes.item(0);
  table_tbody.removeChild(table_tr);
 
  }

}
function clearsearchcss(){
   var tbody=document.getElementById("listtable").childNodes.item(0);
   var  trlength=tbody.childNodes.length;
 
   for(var i=0;i<trlength;i++){
     var div=tbody.childNodes.item(i).childNodes.item(0).childNodes.item(1);
     div.style.cssText="color:windowtext;background:white;";
   }
 
}
//在DIV中选择数据,填入TEXT INPUT中

function selectvalue(obj)
{
  var tr = obj.parentNode;
  var td=tr.childNodes.item(0);
  var value=td.innerHTML;
  var text=document.getElementById(textinput);
  text.value=value;
  var lay1=document.getElementById("searchLayer1");
  lay1.style.display='none';
  firsttime=0;
  selectedvalue=value;
}
//选择样式
var lastOver_findInSelect = null
function selectFX( which ){
 if( firsttime==1){
 clearsearchcss();
 }
 obj = lastOver_findInSelect
 if( obj != null && which != obj ){
  obj.style.cssText="color:windowtext;background:white;"
 }
 which.style.cssText="color:highlighttext;background:highlight;"
 lastOver_findInSelect = which
  var  tbody=document.getElementById("listtable").childNodes.item(0);
  var  trlength=tbody.childNodes.length;

 for(var i=0;i<trlength;i++){
   if(which==tbody.childNodes.item(i).childNodes.item(0).childNodes.item(1)){
         index=i;
        
      }
     }
}

function hotkey(){
 if(window.event.keyCode==40){
   
    div=document.getElementById("listtable").childNodes.item(0).childNodes.item(0).childNodes.item(0).childNodes.item(1);
    div.style.cssText="color:highlighttext;background:highlight;";
 }
  if(window.event.keyCode==38){
    alert('up');
 }
}