类似google首页提示功能（支持上下键滚动选择)

    

客户端代码：
      <div id="divShowCityListIndex" style=" BORDER-RIGHT: #ccccff thin solid; BORDER-TOP: #ccccff thin solid; DISPLAY: none; LEFT: 21px; BORDER-LEFT: #ccccff thin solid; WIDTH: 235px; BORDER-BOTTOM: #ccccff thin solid; POSITION: absolute; TOP: 100px; HEIGHT: 260px; BACKGROUND-COLOR: #ffeeee">
    <div style="WIDTH: 235px;HEIGHT: 10px;BACKGROUND-COLOR: #ffeeee"><font color="royalblue"><b>请选择你需要的cs：</b></font>
    </div>
    <div id="divShowCityList" style="DISPLAY: none;SCROLLBAR-FACE-COLOR: #e6e6e6;SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;OVERFLOW: auto;WIDTH: 235px;SCROLLBAR-SHADOW-COLOR: #d8e2e7;SCROLLBAR-3DLIGHT-COLOR: #96aabd;SCROLLBAR-ARROW-COLOR: #606d79;SCROLLBAR-TRACK-COLOR: #d8e2e7;SCROLLBAR-DARKSHADOW-COLOR: #96aabd;HEIGHT: 250px;BACKGROUND-COLOR: #ffeeee"></div>
   </div>
   <script language="javascript">

                            /*document.onclick=hideCalendar;
                            function hideCalendar() {
                         var cf2=document.getElementById("divShowCityListIndex");
                         if(cf2!=null)
                            cf2.style.display="none";
                            }*/      

       //鼠标停留在cs列表上的背景颜色
    function trOnmouseOver(id)
    {
     var count=document .getElementById ("hiddenCiyCount").value;
     var index=id.substring(8);
     
     for(var i=0;i<parseInt(count);i++)
     {
      if (i==parseInt(index))
      {
       document .getElementById ("TrNumber"+i).style .backgroundColor="PaleTurquoise";
                document .getElementById ("TrNumber"+i).style.cursor ="hand";
                document .getElementById ("hiddenTrIndex").value=i;
      }
      else
      {
       document .getElementById ("TrNumber"+i).style .backgroundColor="#ffeeee";
                document .getElementById ("TrNumber"+i).style.cursor ="";
      }
     }
     
    }
    //鼠标选择cs
    function trOnclick(o)
    {
     var trid=o.id;
        var tdId="TdNumber"+trid.substring(8)
     document .getElementById ("textbox_city").value=document .getElementById (tdId).innerText;
     document .getElementById ("divShowCityList").style .display ="none";
     document .getElementById ("divShowCityListIndex").style .display ="none";
     document.getElementById("textbox_city").style.color="#000000";
     
    }
    //上下选择cs(文本框的onkeydown事件调用)
    function divCityListUpDown()
    {
      if (document .getElementById ("tabCityList")!=null)
      {
          var index=document .getElementById ("hiddenTrIndex").value;
          var newIndex,newTrID;
          var count=document .getElementById ("hiddenCiyCount").value;
      
          //按向上的按钮
       if (event.keyCode=="38")
       {
        newIndex=parseInt(index)-1;
        document .getElementById ("hiddenTrIndex").value=newIndex;
              newTrID="TrNumber"+newIndex;
        for (var i=0;i<parseInt(count);i++)
        {
          if (parseInt(newIndex)==-1)
          {
           document .getElementById ("hiddenTrIndex").value=parseInt(count);
           divCityListUpDown();
           document .getElementById ("divShowCityList").scrollTop=1000;
           return;
          }
          if (i==newIndex)
          {
           document.getElementById(newTrID).style .backgroundColor="PaleTurquoise";
           document.getElementById(newTrID).style.cursor ="hand";
          }
          else
          {
           document.getElementById("TrNumber"+i).style .backgroundColor="#ffeeee";
           document.getElementById("TrNumber"+i).style.cursor ="";
          }
           }
           document .getElementById ("divShowCityList").scrollTop-=17;
       }
       //按向下的按钮
       if (event.keyCode=="40")
       {
        newIndex=parseInt(index)+1;
        document .getElementById ("hiddenTrIndex").value=newIndex;
              newTrID="TrNumber"+newIndex;
        for (var i=0;i<parseInt(count);i++)
        {
          if (parseInt(newIndex)==parseInt(count))
          {
           document .getElementById ("hiddenTrIndex").value="-1";
           divCityListUpDown();
           document .getElementById ("divShowCityList").scrollTop=0;
           return;
          }
          if (i==newIndex)
          {
           document.getElementById(newTrID).style .backgroundColor="PaleTurquoise";
           document.getElementById(newTrID).style.cursor ="hand";
          }
          else
          {
           document.getElementById("TrNumber"+i).style .backgroundColor="#ffeeee";
           document.getElementById("TrNumber"+i).style.cursor ="";
          }
           }
       
          document .getElementById ("divShowCityList").scrollTop+=17;
       
        
         
       }
       //回车键选择cs
       if (event.keyCode=="13")
       {
        document .getElementById ("textbox_city").value=document .getElementById ("TDNumber"+index).innerText ;
        document .getElementById ("divShowCityList").style .display ="none";
        document .getElementById ("divShowCityListIndex").style .display ="none";
                 document.getElementById("textbox_city").style.color="#000000";
               
       }
       
      }
    }
    //选择cs主调函数(文本框的onpropertychange事件调用)
    function selectCityName()
       {
     
     if (document .getElementById("textbox_city").value!="" && document .getElementById("textbox_city").value!="中文名称或拼音")
     {
         //显示用户输入相似cs
               ShowDivCityList(document .getElementById("textbox_city").value)
            showDivCityLis("textbox_city");
            document .getElementById ("divShowCityListIndex").style .display ="block";
            if (document .getElementById ("divShowCityList")!=null)
         document .getElementById ("divShowCityList").style .display ="block";
      
      if (document .getElementById ("tabCityList")!=null)
      {
       document.getElementById("TrNumber0").style .backgroundColor="PaleTurquoise";
       document.getElementById("TrNumber0").style.cursor ="hand";
       document .getElementById ("hiddenTrIndex").value="0";
       document .getElementById ("divShowCityList").scrollTop=0;
      }
         }
         else
         {
      document .getElementById ("divShowCityListIndex").style .display ="none";
      if (document .getElementById ("divShowCityList")!=null)
      document .getElementById ("divShowCityList").style .display ="none";
         }
       }
       //给cs列表Div定位
    function showDivCityLis(name)
      {
      
      var cf=document.getElementById("divShowCityListIndex");
      var oImg=document.getElementById(name);

      var eT=0,eL=0,p=oImg;
      var sT=document.body.scrollTop,sL=document.body.scrollLeft;
      var eH=oImg.height+25,eW=oImg.width;
      
      while(p&&p.tagName!="BODY"){eT+=p.offsetTop;eL+=p.offsetLeft;p=p.offsetParent;}
      
      
      cf.style.top=((document.body.clientHeight-(eT-sT)-eH>=cf.style.posHeight)?eT+eH:eT-cf.style.posHeight)-4;
      cf.style.left=((document.body.clientWidth-(eL-sL)>=cf.style.posWidth)?eL:eL+eW-cf.style.posWidth);
     
     }
     //Ajax实时查询相似cs
    function ShowDivCityList(selectCityName)
    {
     var xmlhttp; 
     if (window.XMLHttpRequest)
     {
      xmlhttp = new XMLHttpRequest();
     }
     else(window.ActiveXObject)
     {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     }
     
     xmlhttp.open("POST","Default.aspx?selectCityName="+selectCityName,false);
     xmlhttp.send(null);
     var returnCityList = xmlhttp.responseText;
     if (returnCityList=="error")
        document .getElementById ("divShowCityListIndex").innerHTML ="<font color=RoyalBlue>对不起，未找到名称为</font><font color=red>"+document .getElementById('textbox_city').value+"</font><font color=RoyalBlue>的cs！</font>";
     else
       document .getElementById ("divShowCityListIndex").innerHTML ="<div style='WIDTH: 240px;HEIGHT: 18px;BACKGROUND-COLOR: #ffeeee'><font color='royalblue'><b>请选择您要查询的cs(鼠标或↑↓选择):</b></font></div><div id='divShowCityList' style='DISPLAY: none;SCROLLBAR-FACE-COLOR: #e6e6e6;SCROLLBAR-HIGHLIGHT-COLOR: #ffffff;OVERFLOW: auto;WIDTH: 240px;SCROLLBAR-SHADOW-COLOR: #d8e2e7;SCROLLBAR-3DLIGHT-COLOR: #96aabd;SCROLLBAR-ARROW-COLOR: #606d79;SCROLLBAR-TRACK-COLOR: #d8e2e7;SCROLLBAR-DARKSHADOW-COLOR: #96aabd;HEIGHT: 250px;BACKGROUND-COLOR: #ffeeee'></div>";
     //alert(returnCityList)
     if (document .getElementById ("divShowCityList")!=null)
     {
      document .getElementById ("divShowCityList").innerHTML="";
      document .getElementById ("divShowCityList").innerHTML=returnCityList;
     }
     
     }
   </script>

服务器端代码：
 
 private void ShowSelectCityList(string cityName)
  {
   string selectCityList="error";
   DataTable dt=new Etmc.App.Hotel.Business.Web.NoHotelSuggestion().GetCityInfoByCityName(cityName);
   
   if (dt.Rows.Count >0)
   {
    string star="<table id='tabCityList'  cellSpacing='0' cellPadding='2'width='98%' align='center' border='0' >";
    string middle="";
    string end="</table>";
    for (int i=0;i<dt.Rows .Count ;i++)
    {
     if (dt.Rows[i]["City_Name_EN"].ToString().Trim () ==string.Empty)
       dt.Rows[i]["City_Name_EN"]=Etmc.Commons.CommonFun.CommUtil.GetAllWordSpell(dt.Rows[i]["City_Name"].ToString());
     middle+="<tr id='TrNumber"+i.ToString()+"' onmouseover='trOnmouseOver(this.id);' name='tr"+dt.Rows[i]["City_Name_EN"].ToString().ToLower()+"' onclick='trOnclick(this);'><td><font color=RoyalBlue>"+dt.Rows[i]["City_Name_EN"].ToString().ToLower()+"</font></td><td align='right' name='td"+dt.Rows[i]["City_Name_EN"].ToString().ToLower()+"' id='TdNumber"+i.ToString()+"'><font color=RoyalBlue>"+dt.Rows[i]["City_Name"].ToString()+"</font></td></tr><tr height=1 bgcolor=#9bbaf3><td colspan=2></td></tr>";
    }
    selectCityList=star+"<tr height=2 bgcolor=#ffffff><td colspan=2><input type='hidden' id='hiddenCiyCount' value='"+dt.Rows.Count+"'></td></tr><tr height=1 bgcolor=#9bbaf3><td colspan=2></td></tr>"+middle+end;
   }
   Response .Write (selectCityList);
   Response .Flush();
   Response .End ();
  }