VS2003+Ajax Div文本框输入提示

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

  1function 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
 17function DoSelect(id,text)
 18{
 19    //完成选择项
 20    document.getElementById(id).value=text;        //返回选项的值给文本框
 21    DeleteTip("TipListBox");                    //删除提示窗口
 22}
 23function SelectItem(Pos)
 24{
 25    //将焦点给指定位置的项
 26    var e = document.getElementById("TipListBox_"+Pos);
 27    if(e != null) e.focus();
 28    event.returnValue = 0;
 29}
 30function SetFocusStyle(refObj)
 31{
 32    //设置光标所在项的样式
 33    refObj.style.color="#fff";
 34    refObj.style.backgroundColor="#0066CC";
 35}
 36function SetBlurStyle(refObj)
 37{
 38    //恢复光标所在项的样式
 39    refObj.style.color="#000";
 40    refObj.style.backgroundColor="";
 41}
 42function DeleteTip(id)
 43{
 44    //删除提示窗口
 45    if(document.getElementById(id) != null)
 46    {
 47        document.getElementById(id).removeNode(true);
 48    }
 49}
 50//取总数
 51function CountNum(strValue,ID)
 52{
 53 var count=WebSite.MethodFunction.productcount(strValue,ID);
 54 return count;
 55}
 56//取结果列项
 57function GetstrHTML(strValue,ID)
 58{
 59 var strlist = WebSite.MethodFunction.bind(strValue,ID);
 60 return strlist.value;
 61}
 62function 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;"+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;"+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;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;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;"+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;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;
        }
    }
}