JS 自动完成 AutoComplete(Ajax 查询)

一：JS 部分

//******************************************************** 
//创建日期: 2009-03-10 
//作 者: oloen 
//?热菟得?　自动完成JS类 
//用法： 
// var auto = new autoComplete(客户端ID); 
// auto.Init(document.all.客户端ID); 
// auto.Type = 'PSUnit' //PSSale 
//******************************************************** 
//自动完成 
function autoComplete(id) 
{ 
var me = this; 
//自动完成绑定控件客户端ID 
me.AutoCompleteControlID 
me.handle = null 
me.DivResult ; 
me.currentIndex = -1; 
me.LastIndex = -1; 
me.requestObj; 
me.CurrentTD = ''; 
me.Filter = '1=1'; 
me.Type = 'PSUnit' 
if(id != null && typeof(id) != undefined) 
me.AutoCompleteControlID = id; 
if(me.DivResult == null||typeof(me.DivResult)=="undefined") 
{ 
me.DivResult = document.createElement("div"); 
var parent = document.getElementById(me.AutoCompleteControlID).parentElement; 
if(typeof(parent)!="undefined"){ 
parent.appendChild(me.DivResult); 
} 
} 
this.Init = function(obj) 
{ 
me.handle = obj 
me.AutoCompleteControlID = obj.id 
} 
this.Auto = function() 
{ 
me.DivResult.style.position = "absolute"; 
me.DivResult.style.top = me.handle.getBoundingClientRect().top - 11; 
me.DivResult.style.left = me.handle.getBoundingClientRect().left; 
me.DivResult.style.width = me.handle.width; 
me.DivResult.style.height = 20; 
me.DivResult.style.backgroundColor = "#ffffff"; 
//如果按下 向上, 向下 或 回车 
if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13) 
{ 
me.SelectItem(); 
} 
else 
{ 
//恢复下拉选择项为 -1 
currentIndex = -1; 
if(window.XMLHttpRequest) 
{ 
me.requestObj = new XMLHttpRequest(); 
if(me.requestObj.overrideMimeType) 
me.requestObj.overrideMimeType("text/xml"); 
} 
else if(window.ActiveXObject) 
{ 
try 
{ 
me.requestObj = new ActiveXObject("Msxml2.XMLHTTP"); 
} 
catch(e) 
{ 
me.requestObj = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
} 
if(me.requestObj == null) 
return; 
me.requestObj.onreadystatechange = me.ShowResult; 
me.requestObj.open("GET", "../Common/AutoComplete.aspx?InputValue=" + escape(me.handle.value) + "&Filter=" + me.Filter + "&Type=" + me.Type, true); 
me.requestObj.send(); 
} 
} 
this.ShowResult = function() 
{ 
if (me.requestObj.readyState == 4) 
{ 
me.DivResult.innerHTML = me.requestObj.responseText; 
me.DivResult.style.display = ""; 
} 
} 
this.SelectItem = function() 
{ 
//结果 
var result = document.getElementById("Tmp_AutoComplete_tblResult"); 
if (!result) 
return; 
if(result.rows[me.LastIndex] != null) 
{ 
result.rows[me.LastIndex].style.backgroundColor = "#FFFFFF"; 
result.rows[me.LastIndex].style.color = "#000000"; 
} 
var maxRow = result.rows.length; 
//向上 
if (event.keyCode == 38 && me.currentIndex > 0) 
me.currentIndex--; 
//向下 
if (event.keyCode == 40 && me.currentIndex < maxRow-1) 
me.currentIndex++; 
//回车 
if (event.keyCode == 13) 
{ 
me.Select() 
me.InitItem(); 
return; 
} 
if(result.rows[me.currentIndex]!=undefined) 
{ 
//选中颜色 
result.rows[me.currentIndex].style.backgroundColor = "#3161CE"; 
result.rows[me.currentIndex].style.color = "#FFFFFF"; 
} 
me.DivResult.style.height = maxRow * 15; 
me.LastIndex = me.currentIndex; 
} 
this.Select = function() 
{ 
var result = document.getElementById("Tmp_AutoComplete_tblResult"); 
if (!result || result.rows.length<=0) 
return; 
//默认第一条记录 
if(me.currentIndex < 0) 
me.currentIndex = 0; 
var ReturnValue = result.rows[me.currentIndex].ReturnValue; 
if(ReturnValue != undefined) 
{ 
me.DivResult.style.display = 'none'; 
//设置页面值 
ReturnAutoComplete(ReturnValue); 
} 
} 
this.Hide = function() 
{ 
me.DivResult.style.display = 'none'; 
me.currentIndex = -1; 
} 
this.InitItem = function() 
{ 
me.DivResult.style.display = 'none'; 
me.DivResult.innerHTML = ""; 
me.currentIndex = -1; 
} 
me.DivResult.onclick = function() 
{ 
try{me.Auto();}catch(e){} 
} 
document.getElementById(me.AutoCompleteControlID).onclick = function(){ 
try{me.Auto();}catch(e){} 
} 
document.getElementById(me.AutoCompleteControlID).onkeyup = function(){ 
try{me.Auto();}catch(e){} 
} 
document.getElementById(me.AutoCompleteControlID).onkeydown = function(){ 
if (event.keyCode == 13) 
{ 
try 
{ 
me.Select() 
me.InitItem(); 
}catch(e){} 
} 
} 
document.getElementById(me.AutoCompleteControlID).onblur = function(){ 
me.Hide(); 
} 
}

2 后台查询页面

using System; 
using System.Data; 
using System.Configuration; 
using System.Collections; 
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.Data.SqlClient; 
//******************************************************** 
//创建日期: 2009-03-10 
//作 者: Oloen 
//?热菟得?　自动完成后台查询页面 
// Type:pssale 合同查询 
// Type:psunit 房间查询 
//******************************************************** 
/// <summary> 
/// 自动完成后台查询页面 
/// </summary> 
public partial class Common_AutoComplete : System.Web.UI.Page 
{ 
const string tbStyle = @"style=""color:#F7922E"""; 
/// <summary> 
/// 过滤条件 
/// </summary> 
string Filter = string.Empty; 
/// <summary> 
/// 查询值 
/// </summary> 
string InputValue = string.Empty; 
/// <summary> 
/// 自动完成类别 
/// Type:pssale 合同查询 
/// Type:psunit 房间查询 
/// </summary> 
string Type = string.Empty; 
/// <summary> 
/// 返回结果字符 
/// </summary> 
string ReturnStr = string.Empty; 
private void Page_Load(object sender, System.EventArgs e) 
{ 
switch (Type.ToLower()) 
{ 
case "pssale": 
case "psunit": 
default: 
AutoPSUnitNo(); 
break; 
} 
Response.Clear(); 
Response.ContentType = "text/xml"; 
Response.ContentEncoding = System.Text.Encoding.GetEncoding("UTF-8"); 
Response.Write(ReturnStr); 
Response.End(); 
} 
protected override void OnInit(EventArgs e) 
{ 
base.OnInit(e); 
Filter = Request.QueryString["Filter"] ?? "1=1"; 
InputValue = Request.QueryString["InputValue"] ?? ""; 
InputValue.Replace("'","''"); 
Type = Request.QueryString["Type"] ?? ""; 
} 
/// <summary> 
/// 售楼系统房间编号自动完成 
/// </summary> 
void AutoPSUnitNo() 
{ 
if (!string.IsNullOrEmpty(InputValue)) 
{ 
ReturnStr = @"<table cellSpacing=""0"" cellPadding=""0"" width=""150px"" align=""center"" border=""0"" id=""Tmp_AutoComplete_tblResult"" style=""padding-left:5;padding-right:5; background-color:#FFFFFF;border:1px solid #999999;"">"; 
string Sql = string.Format(@"SELECT TOP 10 UnitID,UnitNo,ProjectNo,PhaseNo,BlockNo FROM View_PS_Unit WHERE UnitNo LIKE '%{0}%' AND {1}", InputValue, Filter); 
if (Type.ToLower().Equals("pssale")) 
Sql = string.Format(@"SELECT TOP 10 SaleID,UnitID,UnitNo,ContractNo,Name,SaleDate,SellingPrice,ProjectNo FROM View_PS_Sale_Unit WHERE UnitNo LIKE '%{0}%' AND {1}", InputValue, Filter); 
using (SqlDataReader sdr = DataAccessHelper.ExecuteReader(Sql) as SqlDataReader) 
{ 
if (sdr == null || !sdr.HasRows) 
{ 
ReturnStr = string.Empty; 
return; 
} 
while (sdr.Read()) 
{ 
string td = string.Format(@"<td height=""15"" nowrap>{0}</td>", sdr["ProjectNo"].ToString()); 
//td += string.Format(@"<td height=""15"" nowrap>{0}</td>", sdr["PhaseNo"].ToString()); 
//td += string.Format(@"<td height=""15"" nowrap>{0}</td>", sdr["BlockNo"].ToString()); 
td += string.Format(@"<td height=""15"" nowrap align=""right"" {1}>{0}</td>", sdr["UnitNo"].ToString(), tbStyle); 
if (Type.ToLower().Equals("pssale")) 
{ 
ReturnStr += string.Format(@"<tr ReturnValue=""{0},{1},{2},{3},{4},{5},{6}"">{7}</tr>", 
sdr["SaleID"].ToString(), sdr["UnitID"].ToString(), 
sdr["UnitNo"].ToString(), sdr["ContractNo"].ToString(), 
sdr["Name"].ToString(), sdr["SaleDate"].ToString(), 
sdr["SellingPrice"].ToString(), td); 
} 
else 
ReturnStr += string.Format(@"<tr ReturnValue=""{0},{1}"">{2}</tr>", sdr["UnitID"].ToString(), sdr["UnitNo"].ToString(), td); 
} 
} 
ReturnStr += @"</table>"; 
} 
} 
}

3 调用部分

<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb-2312" /> 
<script type="text/javascript" src="../JS/AutoComplete.js"></script> 
<title>无标题 1</title> 
</head> 
<body> 
<input id="t1" type="text"> 
<script> 
var auto = new autoComplete('t1') 
auto.Init(document.all.t1); 
//选中后做的事情 
function ReturnAutoComplete(ReturnValue) 
{ 
alert(ReturnValue) 
} 
</script> 
</body> 
</html>