java 怎么模拟ajax,google输入自动完成的简单模拟(用AJAX实现)

比较简单的模拟,文本框输入CompanyName,然后

搜索SqlServer2000 里NorthWind数据库 Suppliers表的CompanyName字段,

然后实现自动完成

四个文件

1 .AutoComplete.htm

输入自动完成

//输入信息的文本框

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;

}

CompanyName

AutoComplete.aspx

AutoComplete.aspx.cs

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

http://www.vs2005.com/Ajax/427/2/default.aspx

posted on 2007-10-05 23:01 百年 阅读(235) 评论(0)  编辑  收藏 所属分类: .net