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.onchange=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;  122px; position: absolute; top: 216px;
                                   height: 115px">
                                  <select id="ManList" name="ManList" size=8 style=" 122px; height: 111px;">
                                <option selected="selected"></option>
                              </select>
                               </div>