VS2003+Ajax Div文本框输入提示

Web.config  
<system.web>
   <httpHandlers>
 <add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro"/>
    </httpHandlers>

  1 function GetIE(e) 
  2 {
  3    //获取对象的大小及位置
  4    var t=e.offsetTop; 
  5    var l=e.offsetLeft; 
  6    var w=e.offsetWidth; 
  7    var h=e.offsetHeight; 
  8    while(e=e.offsetParent) 
  9    { 
 10        t+=e.offsetTop; 
 11        l+=e.offsetLeft; 
 12    } 
 13    var re = {Top:t,Left:l,Width:w,Height:h}
 14    return re; 
 15}
 16
 17 function DoSelect(id,text)
 18 {
 19    //完成选择项
 20    document.getElementById(id).value=text;        //返回选项的值给文本框
 21    DeleteTip("TipListBox");                    //删除提示窗口
 22}
 23 function SelectItem(Pos)
 24 {
 25    //将焦点给指定位置的项
 26    var e = document.getElementById("TipListBox_"+Pos);
 27    if(e != null) e.focus();
 28    event.returnValue = 0;
 29}
 30 function SetFocusStyle(refObj)
 31 {
 32    //设置光标所在项的样式
 33    refObj.style.color="#fff";
 34    refObj.style.backgroundColor="#0066CC";
 35}
 36 function SetBlurStyle(refObj)
 37 {
 38    //恢复光标所在项的样式
 39    refObj.style.color="#000";
 40    refObj.style.backgroundColor="";
 41}
 42 function DeleteTip(id)
 43 {
 44    //删除提示窗口
 45    if(document.getElementById(id) != null)
 46    {
 47        document.getElementById(id).removeNode(true);
 48    }
 49}
 50 // 取总数
 51 function CountNum(strValue,ID)
 52 {
 53 var count=WebSite.MethodFunction.productcount(strValue,ID);
 54 return count;
 55}
 56 // 取结果列项
 57 function GetstrHTML(strValue,ID)
 58 {
 59 var strlist = WebSite.MethodFunction.bind(strValue,ID);
 60 return strlist.value;
 61}
 62 function ShowTip(refObj)
 63 {
 64    DeleteTip("TipListBox");        //删除之前的提示窗口
 65    
 66    document.onclick=function()
 67    {
 68        //如果鼠标操作不在当前文本框，则将提示窗口删除
 69        if(event.srcElement.id != refObj.id)
 70        {
 71            DeleteTip("TipListBox");
 72            document.onclick = null;
 73        }
 74    }
 75    var currentPos = -1;    //当前选项位置
 76    var str = refObj.value;                //当前文本框的值
 77    var eMember = GetIE(refObj);
         var eIframe=document.createElement("iframe");
        eIframe.id="Tipiframe";
        eIframe.style.cssText ="position:absolute;z-index:9;width:"+eMember.Width+"px;height:130px;top:"+(eMember.Top+eMember.Height)+"px;left:"+eMember.Left+"px;" ;
        eIframe.frameborder="0";
 78    var eWinElement = document.createElement("div");
 79    eWinElement.id="TipListBox";                        //指定提示窗口ID为TipListBox
 80    eWinElement.style.cssText = "overflow:auto;background-Color:#fff;font-size:12px;border:1px solid #000;position:absolute;left:"+eMember.Left+"px;top:"+(eMember.Top+eMember.Height)+"px;width:"+eMember.Width+"px";
 81    //var li = '<a href="javascript:void(0)" onblur="SetBlurStyle(this)" onfocus="SetFocusStyle(this)" id="TipListBox_$Order$" onclick="DoSelect(&quot;$ID$&quot;,this.innerText)" style="text-decoration:none;width:100%;cursor:default;color:#000;padding-left:2px;display:block;" onmouseout="SetBlurStyle(this)" onmouseover="SetFocusStyle(this)">$Value$</a>';    //列表项模板
 82    var strHTML = "";
 83    var iCount = 0;
 84    strHTML = GetstrHTML(str,refObj.id);
 85    iCount = CountNum(str,refObj.id);
 86
 87    if(strHTML == "") return;        //如果没有配匹的值则不显示提示窗口
 88    eWinElement.innerHTML =strHTML;
 89    document.body.appendChild(eWinElement);
 90    if(parseInt(eWinElement.offsetHeight)>120) eWinElement.style.height="120px";    //定义提示窗口高度
 91    document.onkeydown=function()
 92    {
 93        if(event.keyCode == 40 && currentPos < (iCount-1))
 94        {
 95            //向下的按键操作
 96            SelectItem(++currentPos);
 97        }
 98        if(event.keyCode == 38 && currentPos > 0)
 99        {
100            //向上的按键操作
101            SelectItem(--currentPos);
102        }
103        if(event.keyCode != 38 && event.keyCode != 40)
104        {
105            //其它按钮将当前选项恢复-1的位置
106            currentPos = -1;
107        }
108    }
109}
110   // 类
111   public   class  MethodFunction
112   {
113  [AjaxMethod]
114  public string bind(string strkey,string controlId)
115  {
116   string strConn="Data Source=BX-LWB;Initial Catalog=NorthWind;User ID=sa;Password=sa;";
117   string strList=string.Empty;
118   using (SqlConnection conn = new SqlConnection(strConn)) 
119   {
120    SqlCommand command = new SqlCommand("select ProductName from Products where ProductName like @Name", conn);
121    command.Parameters.Add(new SqlParameter("@name", strkey + "%"));
122    SqlDataAdapter adapter = new SqlDataAdapter(command);
123    DataSet ds = new DataSet();
124    adapter.Fill(ds);
125    System.Data.DataTable dt=ds.Tables[0];
126 
127    for(int i=0;i<dt.Rows.Count;i++)
128    {
129     strList=strList+"<a href=\"javascript:void(0)\" onblur=\"SetBlurStyle(this)\" onfocus=\"SetFocusStyle(this)\" id=\"TipListBox_"+i.ToString()+"\" onclick=\"DoSelect('"+controlId+"',this.innerText)\" style=\"text-decoration:none;width:100%;cursor:default;color:#000;padding-left:2px;display:block;\" onmouseout=\"SetBlurStyle(this)\" onmouseover=\"SetFocusStyle(this)\">"+dt.Rows[i]["ProductName"].ToString()+"</a>";
130    }
131    return strList;
132   }
133  }
134  [AjaxMethod]
135  public int productcount(string strkey,string controlId)
136  {
137   string strConn="Data Source=BX-LWB;Initial Catalog=NorthWind;User ID=sa;Password=sa;";
138   string strList=string.Empty;
139   using (SqlConnection conn = new SqlConnection(strConn)) 
140   {
141    SqlCommand command = new SqlCommand("select ProductName from Products where ProductName like @Name", conn);
142    command.Parameters.Add(new SqlParameter("@name", strkey + "%"));
143    SqlDataAdapter adapter = new SqlDataAdapter(command);
144    DataSet ds = new DataSet();
145    adapter.Fill(ds);
146    System.Data.DataTable dt=ds.Tables[0];
147    return dt.Rows.Count;
148   }
149  }
150 }
151    // 页面加载
152    private   void  Page_Load( object  sender, System.EventArgs e)
153    {
154   // 在此处放置用户代码以初始化页面
155   Utility.RegisterTypeForAjax(typeof(WebSite.MethodFunction));
156  }
157 页面
158 <% @ Page language = " c# "  Codebehind = " WebForm1.aspx.cs "  AutoEventWireup = " false "  Inherits = " WebSite.WebForm1 "   %>
159 <! DOCTYPE HTML PUBLIC  " -//W3C//DTD HTML 4.01 Transitional//EN "   " http://www.w3.org/TR/html4/loose.dtd " >
160 < HTML >
161   < HEAD >
162    < title > WebForm1 </ title >
163    < script src = " JScript.js "  language = " javascript " ></ script >
164   </ HEAD >
165   < body MS_POSITIONING = " GridLayout " >
166    < form id = " Form1 "  method = " post "  runat = " server " >
167     < input id = " test1 "  autocomplete = " off "  type = " text "  onkeyup = " ShowTip(this) " >
168    </ form >
169   </ body >
170 </ HTML >
171

JS文件

function  GetIE(e) 
{
    //获取对象的大小及位置
    var t=e.offsetTop; 
    var l=e.offsetLeft; 
    var w=e.offsetWidth; 
    var h=e.offsetHeight; 
    while(e=e.offsetParent) 
    { 
        t+=e.offsetTop; 
        l+=e.offsetLeft; 
    } 
    var re = {Top:t,Left:l,Width:w,Height:h}
    return re; 
}

function  DoSelect(id,text)
{
    //完成选择项
    document.getElementById(id).value=text;        //返回选项的值给文本框
    DeleteTip("TipListBox");                    //删除提示窗口
}
function  SelectItem(Pos)
{
    //将焦点给指定位置的项
    var e = document.getElementById("TipListBox_"+Pos);
    if(e != null) e.focus();
    event.returnValue = 0;
}
function  SetFocusStyle(refObj)
{
    //设置光标所在项的样式
    refObj.style.color="#fff";
    refObj.style.backgroundColor="#0066CC";
}
function  SetBlurStyle(refObj)
{
    //恢复光标所在项的样式
    refObj.style.color="#000";
    refObj.style.backgroundColor="";
}
function  DeleteTip(id)
{
    //删除提示窗口
    if(document.getElementById(id) != null)
    {
        document.getElementById(id).removeNode(true);
    }
}
// 取总数
function  CountNum(strValue,ID)
{
    var count=WebSite.MethodFunction.productcount(strValue,ID);
    return count;
}
// 取结果列项
function  GetstrHTML(strValue,ID)
{
    var strlist = WebSite.MethodFunction.bind(strValue,ID);
    return strlist.value;
}
function  ShowTip(refObj)
{
    DeleteTip("TipListBox");        //删除之前的提示窗口
    
    document.onclick=function()
    {
        //如果鼠标操作不在当前文本框，则将提示窗口删除
        if(event.srcElement.id != refObj.id)
        {
            DeleteTip("TipListBox");
            document.onclick = null;
        }
    }
    var currentPos = -1;    //当前选项位置
    var str = refObj.value;                //当前文本框的值
    var eMember = GetIE(refObj);
    var eWinElement = document.createElement("div");
    eWinElement.id="TipListBox";                        //指定提示窗口ID为TipListBox
    eWinElement.style.cssText = "overflow:auto;background-Color:#fff;font-size:12px;border:1px solid #000;position:absolute;left:"+eMember.Left+"px;top:"+(eMember.Top+eMember.Height)+"px;width:"+eMember.Width+"px";
    //var li = '<a href="javascript:void(0)" onblur="SetBlurStyle(this)" onfocus="SetFocusStyle(this)" id="TipListBox_$Order$" onclick="DoSelect(&quot;$ID$&quot;,this.innerText)" style="text-decoration:none;width:100%;cursor:default;color:#000;padding-left:2px;display:block;" onmouseout="SetBlurStyle(this)" onmouseover="SetFocusStyle(this)">$Value$</a>';    //列表项模板
    var strHTML = "";
    var iCount = 0;
    strHTML = GetstrHTML(str,refObj.id);
    iCount = CountNum(str,refObj.id);

    if(strHTML == "") return;        //如果没有配匹的值则不显示提示窗口
    eWinElement.innerHTML =strHTML;
    document.body.appendChild(eWinElement);
    if(parseInt(eWinElement.offsetHeight)>120) eWinElement.style.height="120px";    //定义提示窗口高度
    document.onkeydown=function()
    {
        if(event.keyCode == 40 && currentPos < (iCount-1))
        {
            //向下的按键操作
            SelectItem(++currentPos);
        }
        if(event.keyCode == 38 && currentPos > 0)
        {
            //向上的按键操作
            SelectItem(--currentPos);
        }
        if(event.keyCode != 38 && event.keyCode != 40)
        {
            //其它按钮将当前选项恢复-1的位置
            currentPos = -1;
        }
    }
}