以下内容看看好了，无任何价值。
比较简单的模拟,文本框输入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="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>