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)" οnblur="SetBlurStyle(this)" οnfοcus="SetFocusStyle(this)" id="TipListBox_$Order$" οnclick="DoSelect("$ID$",this.innerText)" style="text-decoration:none;width:100%;cursor:default;color:#000;padding-left:2px;display:block;" οnmοuseοut="SetBlurStyle(this)" οnmοuseοver="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)\" οnblur=\"SetBlurStyle(this)\" οnfοcus=\"SetFocusStyle(this)\" id=\"TipListBox_"+i.ToString()+"\" οnclick=\"DoSelect('"+controlId+"',this.innerText)\" style=\"text-decoration:none;width:100%;cursor:default;color:#000;padding-left:2px;display:block;\" οnmοuseοut=\"SetBlurStyle(this)\" οnmοuseοver=\"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
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)" οnblur="SetBlurStyle(this)" οnfοcus="SetFocusStyle(this)" id="TipListBox_$Order$" οnclick="DoSelect("$ID$",this.innerText)" style="text-decoration:none;width:100%;cursor:default;color:#000;padding-left:2px;display:block;" οnmοuseοut="SetBlurStyle(this)" οnmοuseοver="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)\" οnblur=\"SetBlurStyle(this)\" οnfοcus=\"SetFocusStyle(this)\" id=\"TipListBox_"+i.ToString()+"\" οnclick=\"DoSelect('"+controlId+"',this.innerText)\" style=\"text-decoration:none;width:100%;cursor:default;color:#000;padding-left:2px;display:block;\" οnmοuseοut=\"SetBlurStyle(this)\" οnmοuseοver=\"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)" οnblur="SetBlurStyle(this)" οnfοcus="SetFocusStyle(this)" id="TipListBox_$Order$" οnclick="DoSelect("$ID$",this.innerText)" style="text-decoration:none;width:100%;cursor:default;color:#000;padding-left:2px;display:block;" οnmοuseοut="SetBlurStyle(this)" οnmοuseοver="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;
}
}
}
{
//获取对象的大小及位置
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)" οnblur="SetBlurStyle(this)" οnfοcus="SetFocusStyle(this)" id="TipListBox_$Order$" οnclick="DoSelect("$ID$",this.innerText)" style="text-decoration:none;width:100%;cursor:default;color:#000;padding-left:2px;display:block;" οnmοuseοut="SetBlurStyle(this)" οnmοuseοver="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;
}
}
}