用AJAX实现google输入自动完成的简单模拟 - body

比较简单的模拟,文本框输入CompanyName,然后
搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段,
然后实现自动完成

四个文件
1 .AutoComplete.htm

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

//输入信息的文本框
7

var txtInput;
8

//下拉表当前选中项的索引
9

var currentIndex = -1;
10

//初始化参数,和下拉表位置
12

function initPar()
13

{
14

txtInput = document.getElementById("txtCompanyName");
15

//设置下拉表相对于文本输入框的位置
16

setPosition();
17

}
18

//设置下拉表相对于文本输入框的位置
20

function setPosition()
21

{
22

var width = txtInput.offsetWidth;
23

var left = getLength("offsetLeft");
24

var top = getLength("offsetTop") + txtInput.offsetHeight;
25

divContent.style.left = left + "px";
27

divContent.style.top = top + "px";
28

divContent.style.width = width + "px";
29

}
30

//获取对应属性的长度
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

//自动完成
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

//开始请求
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

//显示结果
73

function displayResult()
74

{
75

if (requestObj.readyState == 4)
76

{
77

showData();
78

divContent.style.display = "";
79

}
80

}
81

//显示服务器返回的结果 ,并形成下拉表
83

function showData()
84

{
85

//获取数据
86

var doc = new ActiveXObject("MSXML2.DOMDocument.3.0");
87

doc.loadXML(requestObj.responseText);
88

//显示数据的xslt
90

var docStyle = new ActiveXObject("MSXML2.FreeThreadedDOMDocument");
91

docStyle.async = false;
92

docStyle.load("list.xslt");
93

var docTemplate = new ActiveXObject("MSXML2.XSLTemplate");
95

docTemplate.stylesheet = docStyle;
96

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

192

<div id="divContent" style="display:none; position:absolute; ">
193

</div>
194

</body>
195

</html>
196

AutoComplete.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AutoComplete.aspx.cs" Inherits="AJAXBaseHome.AutoComplete" %>
2

AutoComplete.aspx.cs

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

namespace AJAXBaseHome
17

{
18

public partial class AutoComplete : System.Web.UI.Page
19

{
20

private static string conString = WebConfigurationManager.ConnectionStrings["myData"].ConnectionString;
21

protected void Page_Load(object sender, EventArgs e)
23

{
24

string input = GetInput();
25

Response.Write(GetCompanyName(input));
26

}
27

//获取输入的字符串
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

return builder.ToString();
41

}
42

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数据

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

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>