本文以http://hi.baidu.com/kb81/blog/item/6f7e040848be85d162d98634.html相关内容为基础
Default.aspx
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
<script type="text/javascript" language="javascript">
var XMLHttpReq;
var completeDiv;
var inputField;
var completeTable;
var completeBody;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.XMLHttpRequest) { //Mozilla 浏览器
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) { // IE浏览器
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
}
//发送匹配请求函数
function findNames() {
inputField = document.getElementById("names");
completeTable = document.getElementById("complete_table");
completeDiv = document.getElementById("popup");
completeBody = document.getElementById("complete_body");
if (inputField.value.length > 0) {
createXMLHttpRequest();
var url = "Default2.aspx?names=" + escape(inputField.value); //
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processMatchResponse; //指定响应函数
XMLHttpReq.send(null); // 发送请求
} else {
clearNames();
}
}
// 处理返回匹配信息函数
function processMatchResponse() {
if (XMLHttpReq.readyState == 4) { // 判断对象状态
if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
setNames(XMLHttpReq.responseXML.getElementsByTagName("res"));
} else { //页面不正常
window.alert("您所请求的页面有异常。");
}
}
}
//生成与输入内容匹配行
function setNames(names) {
clearNames();
var size = names.length;
setOffsets();
var row, cell, txtNode;
for (var i = 0; i < size; i++) {
var nextNode = names[i].firstChild.data;
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function() {
this.className = 'mouseOver';
};
cell.onmouseover = function() {
this.className = 'mouseOut';
};
cell.setAttribute("bgcolor", "#ffddcc");
cell.setAttribute("border", "0");
cell.onclick = function() {
completeField(this);
};
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
completeBody.appendChild(row);
}
}
//设置显示位置
function setOffsets() {
completeTable.style.width = "auto"; //显示自动完成的提示框宽度自动伸展或缩小
var left = calculateOffset(inputField, "offsetLeft");
var top = calculateOffset(inputField, "offsetTop") + inputField.offsetHeight;
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left + "px";
completeDiv.style.top = top + "px";
}
//计算显示位置
function calculateOffset(field, attr) {
var offset = 0;
while (field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
//填写输入框
function completeField(cell) {
inputField.value = cell.firstChild.nodeValue;
clearNames();
}
//清除自动完成行
function clearNames() {
var ind = completeBody.childNodes.length;
for (var i = ind - 1; i >= 0; i--) {
completeBody.removeChild(completeBody.childNodes[i]);
}
completeDiv.style.border = "none";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<h1>
Dictionary</h1>
<p style="text-align: center;">
<label for="names">
Search :
<asp:TextBox ID="names" runat="server"></asp:TextBox></label>
<asp:Button ID="Button1" runat="server" Text="Go" />
</p>
<div style="position: absolute;" id="popup" runat="server">
<table id="complete_table" border="0" cellspacing="0" cellpadding="0" style="background-color: #cceeff;">
<tbody id="complete_body">
</tbody>
</table>
</div>
</form>
</body>
</html>
Codeusing System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.names.Attributes.Add("onKeyup", "findNames();");
}
}
Codeusing System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Response.Clear();
Response.ContentType = "text/xml"; //设置输出的格式为XML
Response.Charset = "UTF-8"; //设置输出的编码为UTF-8
this.GetXmlData();
}
private void GetXmlData()
{ //这是用来获取下拉列表框中下面提示的项目数据，获取的数据用XML格式输出
string[] names = new string[] { "a","ab","abc","a1","a12","1","12","123"};
string strPara = Request.QueryString["names"].ToString();//传过来的查询参数
var nameQuery = from name in names
where name.ToString().StartsWith(strPara)
select name;
StringBuilder xmlData = new StringBuilder();
xmlData.AppendLine(@"<?xml version='1.0' encoding='UTF-8' ?>");
xmlData.AppendLine(@"<response>");
foreach(string str in nameQuery)
{
xmlData.AppendLine(@"<res>" + str + "</res>");
}
xmlData.AppendLine(@"</response>");
Response.Write(xmlData.ToString());
Response.End();
}
}