用AJAX实现google输入自动完成的简单模拟
比较简单的模拟,文本框输入CompanyName,然后
搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段,
然后实现自动完成
关于本文章内容的已实现为http://www.cnblogs.com/shenba/articles/1029548.html
以下内容看看好了，无任何价值。
比较简单的模拟,文本框输入CompanyName,然后
搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段,
然后实现自动完成
四个文件
1 .AutoComplete.htm
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml" >
3<head>
4 <title>输入自动完成</title>
5 <script language="javascript">
6
//输入信息的文本框
7 var txtInput;
8 //下拉表当前选中项的索引
9 var currentIndex = -1;
10
11 //初始化参数,和下拉表位置
12 function initPar()
13
{
14 txtInput = document.getElementById("txtCompanyName");
15 //设置下拉表 相对于 文本输入框的位置
16 setPosition();
17
}
18
19 //设置下拉表 相对于 文本输入框的位置
20 function setPosition()
21 {
22 var width = txtInput.offsetWidth;
23 var left = getLength("offsetLeft");
24 var top = getLength("offsetTop") + txtInput.offsetHeight;
25
26 divContent.style.left = left + "px";
27 divContent.style.top = top + "px";
28 divContent.style.width = width + "px";
29 }
30
31 //获取对应属性的长度
32 function getLength(attr)
33 {
34 var offset = 0;
35 var item = txtInput;
36 while (item)
37 {
38 offset += item[attr];
39 item = item.offsetParent;
40 }
41 return offset;
42 }
43
44 //自动完成
45 function autoComplete()
46 {
47 //如果按下 向上, 向下 或 回车
48 if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
49 {
50 //选择当前项
51 selItemByKey();
52 }
53 else //向服务器发送请求
54 {
55 //如果值为空
56 if (txtInput.value == "")
57 {
58 divContent.style.display='none';
59 return;
60 }
61 //恢复下拉选择项为 -1
62 currentIndex = -1;
63
64 //开始请求
65 requestObj = new ActiveXObject("Microsoft.XMLHTTP");
66 requestObj.onreadystatechange = displayResult;
67 requestObj.open("POST", "AutoComplete.aspx?ts=" + new Date().toLocaleString(), true);
68 requestObj.send(txtInput.value);
69 }
70 }
71
72 //显示结果
73 function displayResult()
74 {
75 if (requestObj.readyState == 4)
76 {
77 showData();
78 divContent.style.display = "";
79 }
80 }
81
82 //显示服务器返回的结果 ,并形成下拉表
83 function showData()
84 {
85 //获取数据
86 var doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
87 doc.loadXML(requestObj.responseText);
88
89 //显示数据的xslt
90 var docStyle = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
91 docStyle.async = false;
92 docStyle.load("list.xslt");
93
94 var docTemplate = new ActiveXObject("MSXML2.XSLTemplate");
95 docTemplate.stylesheet = docStyle;
96
97 //通过xslt转换xml数据
98 var processor = docTemplate.createProcessor();
99 processor.input = doc;
100 processor.transform();
101 var res = processor.output;
102
103 //显示转后后的结果
104 divContent.innerHTML = res;
105 }
106
107 //通过键盘选择下拉项
108 function selItemByKey()
109 {
110 //下拉表
111 var tbl = document.getElementById("tblContent");
112 if (!tbl)
113 {
114 return;
115 }
116 //下拉表的项数
117 var maxRow = tbl.rows.length;
118 //向上
119 if (event.keyCode == 38 && currentIndex > 0)
120 {
121 currentIndex--;
122 }
123 //向下
124 else if (event.keyCode == 40 && currentIndex < maxRow-1)
125 {
126 currentIndex++;
127 }
128 //回车
129 else if (event.keyCode == 13)
130 {
131 selValue();
132 return;
133 }
134
135 clearColor();
136 txtInput.value = tbl.rows[currentIndex].innerText;
137 //设置当前项背景颜色为blue 标记选中
138 tbl.rows[currentIndex].style.backgroundColor = "InfoBackground";
139 }
140
141 //清除下拉项的背景颜色
142 function clearColor()
143 {
144 var tbl = document.getElementById("tblContent");
145 for (var i = 0; i < tbl.rows.length; i++)
146 {
147 tbl.rows[i].style.backgroundColor = "";
148 }
149 }
150
151 //选择下拉表中当前项的值 ,用于按回车或鼠标单击选中当前项的值
152 function selValue()
153 {
154 if (event.keyCode != 13)
155 {
156 var text = event.srcElement.innerText;
157 txtInput.value = text;
158 }
159 initList();
160 }
161
162 //文本框失去焦点时 设置下拉表可见性
163 function setDisplay()
164 {
165 //获取当前活动td的表格
166 if (document.activeElement.tagName == "TD")
167 {
168 var tbl = document.activeElement.parentElement.parentElement.parentElement;
169 //如果不是下拉表,则隐藏 下拉表
170 if (tbl.id != "tblContent")
171 {
172 initList();
173 }
174 return;
175 }
176
177 initList();
178
179 }
180
181 function initList()
182 {
183 divContent.style.display='none';
184 divContent.innerHTML = "";
185 currentIndex = -1;
186 }
187
</script>
188</head>
189<body onload="initPar()">
190CompanyName<input type="text" id="txtCompanyName" onkeyup="autoComplete()" onblur="setDisplay();" style="width:400px"/>
191<!-- 显示下拉表的div-->
192<div id="divContent" style="display:none; position:absolute; ">
193</div>
194</body>
195</html>
196
AutoComplete.aspx
1<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoComplete.aspx.cs" Inherits="AJAXBaseHome.AutoComplete" %>
2
AutoComplete.aspx.cs
1using System;
2using System.Data;
3using System.Data.SqlClient;
4using System.Configuration;
5using System.Collections;
6using System.IO;
7using System.Text;
8using System.Web;
9using System.Web.Security;
10using System.Web.UI;
11using System.Web.UI.WebControls;
12using System.Web.UI.WebControls.WebParts;
13using System.Web.UI.HtmlControls;
14using System.Web.Configuration;
15
16namespace AJAXBaseHome
17{
18 public partial class AutoComplete : System.Web.UI.Page
19 {
20 private static string conString = WebConfigurationManager.ConnectionStrings["myData"].ConnectionString;
21
22 protected void Page_Load(object sender, EventArgs e)
23 {
24 string input = GetInput();
25 Response.Write(GetCompanyName(input));
26 }
27
28 //获取输入的字符串
29 private string GetInput()
30 {
31 Stream s = Request.InputStream;
32 int count = 0;
33 byte[] buffer = new byte[1024];
34 StringBuilder builder = new StringBuilder();
35 while ((count = s.Read(buffer, 0, 1024)) > 0)
36 {
37 builder.Append(Encoding.UTF8.GetString(buffer, 0, count));
38 }
39
40 return builder.ToString();
41 }
42
43 private string GetCompanyName(string input)
44 {
45 using (SqlConnection con = new SqlConnection(conString))
46 {
47 SqlCommand command = new SqlCommand("select * from suppliers where CompanyName like @Name", con);
48 command.Parameters.Add(new SqlParameter("@name", input + "%"));
49 SqlDataAdapter adapter = new SqlDataAdapter(command);
50 DataSet ds = new DataSet();
51 adapter.Fill(ds);
52 return ds.GetXml();
53 }
54 }
55 }
56}
57
xslt文件 用于显示xml数据
1<?xml version="1.0" encoding="UTF-8" ?>
2<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
3 <xsl:output method="html"/>
4 <xsl:template match="/">
5 <xsl:apply-templates/>
6 </xsl:template>
7 <xsl:template match="NewDataSet">
8 <table id="tblContent" style="background-color:GrayText">
9 <xsl:for-each select="Table">
10 <tr>
11 <!--td中单击时选择当前值, 鼠标在上时更改行背景颜色,鼠标离开后清除背景颜色-->
12 <td onclick="selValue()" style="cursor:hand" onmouseover="clearColor();this.parentElement.style.backgroundColor='InfoBackground'" onmouseout="clearColor()">
13 <xsl:value-of select="CompanyName"/>
14 </td>
15 </tr>
16 </xsl:for-each>
17 </table>
18 </xsl:template>
19</xsl:stylesheet>
以下内容看看好了，无任何价值。
比较简单的模拟,文本框输入CompanyName,然后
搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段,
然后实现自动完成
四个文件
1 .AutoComplete.htm
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml" >3
<head>4
<title>输入自动完成</title>5
<script language="javascript">6
//输入信息的文本框7
var txtInput;8
//下拉表当前选中项的索引 9
var currentIndex = -1; 10
11
//初始化参数,和下拉表位置12
function initPar()13
{14
txtInput = document.getElementById("txtCompanyName");15
//设置下拉表 相对于 文本输入框的位置 16
setPosition();17
} 18
19
//设置下拉表 相对于 文本输入框的位置20
function setPosition()21
{22
var width = txtInput.offsetWidth;23
var left = getLength("offsetLeft");24
var top = getLength("offsetTop") + txtInput.offsetHeight;25
26
divContent.style.left = left + "px";27
divContent.style.top = top + "px"; 28
divContent.style.width = width + "px";29
} 30
31
//获取对应属性的长度 32
function getLength(attr)33
{34
var offset = 0;35
var item = txtInput;36
while (item)37
{38
offset += item[attr];39
item = item.offsetParent;40
} 41
return offset; 42
} 43
44
//自动完成45
function autoComplete()46
{47
//如果按下 向上, 向下 或 回车48
if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)49
{ 50
//选择当前项 51
selItemByKey();52
} 53
else //向服务器发送请求54
{ 55
//如果值为空 56
if (txtInput.value == "")57
{58
divContent.style.display='none'; 59
return;60
} 61
//恢复下拉选择项为 -1 62
currentIndex = -1; 63
64
//开始请求65
requestObj = new ActiveXObject("Microsoft.XMLHTTP");66
requestObj.onreadystatechange = displayResult;67
requestObj.open("POST", "AutoComplete.aspx?ts=" + new Date().toLocaleString(), true);68
requestObj.send(txtInput.value); 69
} 70
} 71
72
//显示结果 73
function displayResult()74
{75
if (requestObj.readyState == 4)76
{77
showData();78
divContent.style.display = "";79
} 80
} 81
82
//显示服务器返回的结果 ,并形成下拉表83
function showData()84
{85
//获取数据 86
var doc = new ActiveXObject("MSXML2.DOMDocument.3.0");87
doc.loadXML(requestObj.responseText);88
89
//显示数据的xslt 90
var docStyle = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");91
docStyle.async = false; 92
docStyle.load("list.xslt");93
94
var docTemplate = new ActiveXObject("MSXML2.XSLTemplate");95
docTemplate.stylesheet = docStyle;96
97
//通过xslt转换xml数据 98
var processor = docTemplate.createProcessor();99
processor.input = doc;100
processor.transform();101
var res = processor.output;102
103
//显示转后后的结果104
divContent.innerHTML = res; 105
} 106
107
//通过键盘选择下拉项 108
function selItemByKey()109
{110
//下拉表 111
var tbl = document.getElementById("tblContent"); 112
if (!tbl)113
{114
return; 115
} 116
//下拉表的项数117
var maxRow = tbl.rows.length; 118
//向上 119
if (event.keyCode == 38 && currentIndex > 0)120
{121
currentIndex--;122
} 123
//向下 124
else if (event.keyCode == 40 && currentIndex < maxRow-1)125
{126
currentIndex++;127
}128
//回车 129
else if (event.keyCode == 13)130
{131
selValue();132
return;133
} 134
135
clearColor();136
txtInput.value = tbl.rows[currentIndex].innerText; 137
//设置当前项背景颜色为blue 标记选中 138
tbl.rows[currentIndex].style.backgroundColor = "InfoBackground"; 139
} 140
141
//清除下拉项的背景颜色 142
function clearColor()143
{144
var tbl = document.getElementById("tblContent");145
for (var i = 0; i < tbl.rows.length; i++)146
{147
tbl.rows[i].style.backgroundColor = ""; 148
} 149
} 150
151
//选择下拉表中当前项的值 ,用于按回车或鼠标单击选中当前项的值152
function selValue()153
{154
if (event.keyCode != 13)155
{ 156
var text = event.srcElement.innerText;157
txtInput.value = text; 158
} 159
initList(); 160
} 161
162
//文本框失去焦点时 设置下拉表可见性 163
function setDisplay()164
{165
//获取当前活动td的表格 166
if (document.activeElement.tagName == "TD")167
{168
var tbl = document.activeElement.parentElement.parentElement.parentElement; 169
//如果不是下拉表,则隐藏 下拉表 170
if (tbl.id != "tblContent")171
{172
initList();173
}174
return;175
} 176
177
initList();178
179
} 180
181
function initList()182
{183
divContent.style.display='none'; 184
divContent.innerHTML = "";185
currentIndex = -1;186
} 187
</script>188
</head>189
<body onload="initPar()">190
CompanyName<input type="text" id="txtCompanyName" onkeyup="autoComplete()" onblur="setDisplay();" style="width:400px"/>191
<!-- 显示下拉表的div-->192
<div id="divContent" style="display:none; position:absolute; ">193
</div>194
</body>195
</html>196
AutoComplete.aspx
1
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoComplete.aspx.cs" Inherits="AJAXBaseHome.AutoComplete" %>2
AutoComplete.aspx.cs
1
using System;2
using System.Data;3
using System.Data.SqlClient;4
using System.Configuration;5
using System.Collections;6
using System.IO;7
using System.Text;8
using System.Web;9
using System.Web.Security;10
using System.Web.UI;11
using System.Web.UI.WebControls;12
using System.Web.UI.WebControls.WebParts;13
using System.Web.UI.HtmlControls;14
using System.Web.Configuration;15
16
namespace AJAXBaseHome17
{18
public partial class AutoComplete : System.Web.UI.Page19
{20
private static string conString = WebConfigurationManager.ConnectionStrings["myData"].ConnectionString;21
22
protected void Page_Load(object sender, EventArgs e)23
{24
string input = GetInput();25
Response.Write(GetCompanyName(input));26
}27
28
//获取输入的字符串29
private string GetInput()30
{31
Stream s = Request.InputStream;32
int count = 0;33
byte[] buffer = new byte[1024];34
StringBuilder builder = new StringBuilder();35
while ((count = s.Read(buffer, 0, 1024)) > 0)36
{37
builder.Append(Encoding.UTF8.GetString(buffer, 0, count));38
}39
40
return builder.ToString();41
}42
43
private string GetCompanyName(string input)44
{45
using (SqlConnection con = new SqlConnection(conString))46
{47
SqlCommand command = new SqlCommand("select * from suppliers where CompanyName like @Name", con);48
command.Parameters.Add(new SqlParameter("@name", input + "%"));49
SqlDataAdapter adapter = new SqlDataAdapter(command);50
DataSet ds = new DataSet();51
adapter.Fill(ds);52
return ds.GetXml();53
}54
}55
}56
}57
xslt文件 用于显示xml数据
1
<?xml version="1.0" encoding="UTF-8" ?>2
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">3
<xsl:output method="html"/>4
<xsl:template match="/">5
<xsl:apply-templates/>6
</xsl:template>7
<xsl:template match="NewDataSet">8
<table id="tblContent" style="background-color:GrayText">9
<xsl:for-each select="Table">10
<tr>11
<!--td中单击时选择当前值, 鼠标在上时更改行背景颜色,鼠标离开后清除背景颜色-->12
<td onclick="selValue()" style="cursor:hand" onmouseover="clearColor();this.parentElement.style.backgroundColor='InfoBackground'" onmouseout="clearColor()">13
<xsl:value-of select="CompanyName"/>14
</td>15
</tr>16
</xsl:for-each>17
</table>18
</xsl:template>19
</xsl:stylesheet>