VS2003+Ajax Div文本框输入提示

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

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

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

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("$ID$",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

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

</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

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;

}