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