Ajax自动匹配（类似Google Suggest的功能）

Js的文件

//  JScript 文件

   var  queryField;
      var  divName;
     var  listName;
     var  lastVal  =   "" ;
     var  val  =   "" ;　
     var  selectListName;
     var  clearFlag = 0 ;
     var  hiddenFlag = 0 ;
     var  moveToX;
     var  moveToY;
     var  pos;
     var  NotDo = 1 ;
     var  rng;
     // 循环调用函数
     function  mainLoop()
     {
       
        val=escape(queryField.value);                
        if(queryField.value.charAt(queryField.value.length-1)==' ') 
        {
            queryField.value=queryField.value.trim();      //自动清楚最后一个空格。 
         }      
         if(val.length<1 || hiddenFlag)//查询框为空时不查询
            HiddenDiv(); 
          else if(lastVal!=val && !hiddenFlag)//上次的值和本次的值不同并且没有隐藏标志
          {
           
           queryField.value=queryField.value.replace(/，/g,",");
//           var htmlstr=queryField.innerHTML;
//           htmlstr=htmlstr.replace(/(^*\n*)|(^*\r*)/g,"");//替换回车
//           queryField.innerHTML=htmlstr;
           //alert(htmlstr);
           //queryField.value=queryField.value.replace(/(^*\n*)|(^*\r*)/g,"");          
            var response=Bussiness.ArchivesBLL.GetArrayUserName(queryField.value.trim());
            showQueryDiv(response.value);
          }
           lastVal=val;          
         window.setTimeout('mainLoop()',100);
         return true;       
    }   
// 初始化梆定textbox的事件
function  InitQueryCode( QueryField2,ListName2,DivName2)
  {    
       lastVal="";
       val="";
       divName=null;     
     queryField = QueryField2;//document.getElementById(QueryField2);
     pos=GetObjPos(queryField);
     listName=document.getElementById(ListName2);
     divName=document.getElementById(DivName2);
     queryField.autocomplete = "off";
     queryField.onblur=HiddenDiv;
     queryField.onkeydown = keypressHandler;
     //listName.οnchange=SelectChange;    
     listName.onclick=SelectChange;
      selectListName=ListName2;     
     // moveToX=event.clientY+15;//pos.x+queryField.style.height;// 
      //MoveToY=event.clientX-15;
      if(queryField.name=="TextBoxAttendMan")
        moveToX=pos.y+50;//event.clientY+20;
      else
         moveToX=pos.y+20;
      moveToY=pos.x;
     // alert("x:"+pos.x+" y:"+pos.y);
       RedirectDiv();
      divName.style.visibility="hidden";
     //document.all(QueryField2).focus(); 
     //queryField.focus();
     //移动光标到文字的末尾
//      rng = event.srcElement.createTextRange(); 
//      rng.moveToPoint(event.x,event.y); 
        setTimeout("mainLoop()",100);
}
function  RedirectDiv()
{
    divName.style.top=moveToX;
   // divName.style.left=divName.style.left-5;
    divName.style.left=moveToY;  
}
// 将记录插入到list中，并显示
function  showQueryDiv(ResultArray)
{ 
    if(ResultArray.length>0)
    {          
        var index=listName.selectedIndex;
        for(var i=listName.length;i>=0;i--)
                listName.remove(i); 
        var i=0;
        divName.style.visibility="visible";
        for(i=0;i<ResultArray.length;i++)
        {
            listName[i]=new Option(ResultArray[i],ResultArray[i]);          
        }  
        if(listName.lenth-1>=index)
            listName[index].selected=true;
        else
            listName[0].selected=true;
       // divName.style.height="95px";        
    }    
    else
          HiddenDiv();
          
  
   
}

function  CPos(x, y)
{
    this.x = x;
    this.y = y;
}
// 获取控件的位置
function  GetObjPos(ATarget)
{
    var target = ATarget;
    var pos = new CPos(target.offsetLeft, target.offsetTop);
    
    var target = target.offsetParent;
    while (target)
    {
        pos.x += target.offsetLeft;
        pos.y += target.offsetTop;
        
        target = target.offsetParent
    }
    
    return pos;
}

function  SelectChange()
{//选择了记录
//    var spiltstr="";
    var str=listName.value;
//     if(str.indexOf("|")>0)
//        {
//           spiltstr=str.substring(0,str.indexOf("|"));
//        }
//    queryField.value = spiltstr;  
var temp=queryField.value;
    temp=temp.replace(/，/g,",");
    if(temp.lastIndexOf(",")>=0)
    {
        temp=temp.substring(0,temp.lastIndexOf(",")+1);
        queryField.value=temp+str+",";
    }
    else
        queryField.value=str+",";
    //queryField.value=queryField.value+str;
    queryField.focus();
     HiddenDiv();
     hiddenFlag=1;//隐藏标志    
 
}
// 隐藏div
  function  HiddenDiv()
  {   
    divName.style.visibility="hidden";        
 }
  // 按|分离
  function  ReplaceStr(str)
  {
    if(str.indexOf("|")>0)
        {
           str=str.substring(0,str.indexOf("|"));
        }
    return str;
 }
  // 判断是否是数字
  function  IsNumeric(sText)
{
   var ValidChars = "0123456789";
   var IsNumber=true;
   var Char; 
   for (i = 0; i < sText.length && IsNumber == true; i++) 
      { 
      Char = sText.charAt(i); 
      if (ValidChars.indexOf(Char) == -1) 
         {
         IsNumber = false;
         }
      }
   return IsNumber;   
}

// 输入框onkeydown的响应函数．
function  keypressHandler()
{

    hiddenFlag=0;//不隐藏
    //lastVal="";//清除上次的记录
    var key=event.keyCode;
    var KEYUP=38;
    var KEYDOWN=40;
    var KEYENTER=13;
    var KEYTAB=9;
    var KEYBLANK=32;
  
    //alert(key);
    if(key==KEYDOWN && divName.style.visibility!="hidden" && listName.length>0)
    {
        var index=listName.selectedIndex;
        
       // alert(index+"  "+listName.length);
        if(index>=listName.length-1)
            listName.selectedIndex=0;
        else
            listName.selectedIndex=index+1;
    }
    else
          if(key==KEYUP && divName.style.visibility!="hidden" && listName.length>0)
    {
        var index=listName.selectedIndex;
        
        if(index==0)
            listName.selectedIndex=listName.length-1;
        else
            listName.selectedIndex=index-1;
    }
    else 
         if((key==KEYENTER || key==KEYBLANK || key==KEYTAB) && divName.style.visibility!="hidden" && listName.length>0) 
         {
        
            SelectChange();           
            event.keyCode=-1;      
            // queryField.focus();      
         }
    else
        {
           // mainLoop();
           //event.keyCode=null;
        }
 }  

调用方式

  < asp:TextBox ID = " TextOrganiger "  runat = " server "   onfocus = " InitQueryCode(this,'ManList','ManDiv') "   ></ asp:TextBox >& nbsp;
                                 < div id = " ManDiv "   style = "  visibility:hidden; z-index: 101; left: 162px; width: 122px; position: absolute; top: 216px;
                                   height: 115px " >
                                   < select id = " ManList "  name = " ManList "  size = 8  style = " width: 122px; height: 111px; " >
                                 < option selected = " selected " ></ option >
                               </ select >
                                </ div >