自動完成JS類(純JS, Ajax模式)

更新時間：2009年03月12日 23:51:15 作者：

自動完成JS類，用戶體驗較好。封裝成類，方便使用。本站

一、封裝的JS文件
//********************************************************
//創(chuàng)建日期: 2009-03-10
//作者: oloen
//內(nèi)容說明:　自動完成JS類
//用法：
// var auto = new autoComplete(客戶端ID);
// auto.Init(document.all.客戶端ID);
//********************************************************
//自動完成
function autoComplete(id)
{
var me = this;
//自動完成綁定控件客戶端ID
me.AutoCompleteControlID
me.handle = null
me.DivResult ;
me.currentIndex = -1;
me.LastIndex = -1;
me.requestObj;
me.CurrentTD = '';
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 + 17;
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), 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()
{
//結(jié)果
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)
return;
var ReturnValue = result.rows[me.currentIndex].ReturnValue;
if(ReturnValue != undefined)
{
me.DivResult.style.display = 'none';
//設(shè)置頁面值
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()
{
me.Auto();
}
document.getElementById(me.AutoCompleteControlID).onclick = function(){
me.Auto();
}
document.getElementById(me.AutoCompleteControlID).onkeyup = function(){
me.Auto();
}
document.getElementById(me.AutoCompleteControlID).onkeydown = function(){
if (event.keyCode == 13)
{
me.Select()
me.InitItem();
return;
}
}
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;
//********************************************************
//創(chuàng)建日期: 2009-03-10
//作者: oloen
//內(nèi)容說明:　自動完成后臺查詢頁面
//********************************************************
/// <summary>
/// 自動完成后臺查詢頁面
/// </summary>
public partial class Common_AutoComplete : System.Web.UI.Page
{
const string tbStyle = @"";
/// <summary>
/// 過濾條件
/// </summary>
string Filter = string.Empty;
/// <summary>
/// 查詢值
/// </summary>
string InputValue = string.Empty;
/// <summary>
/// 自動完成類別
/// 目前只支持售樓系統(tǒng) UnitNo 查詢
/// </summary>
string Type = string.Empty;
/// <summary>
/// 返回結(jié)果字符
/// </summary>
string ReturnStr = string.Empty;
private void Page_Load(object sender, System.EventArgs e)
{
switch (Type.ToLower())
{
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"] ?? "";
InputValue = Request.QueryString["InputValue"] ?? "";
InputValue.Replace("'","''");
}
/// <summary>
/// 售樓系統(tǒng)房間編號自動完成
/// </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;"">";
#region 數(shù)據(jù)庫操作
//string Sql = string.Format(@"SELECT TOP 10 UnitID,UnitNo,ProjectNo,PhaseNo,BlockNo FROM View_PS_Unit WHERE UnitNo LIKE '%{0}%'", InputValue);
//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"">{0}</td>", sdr["UnitNo"].ToString());
// ReturnStr += string.Format(@"<tr ReturnValue=""{0},{1}"" UnitID=""{0}"" UnitNo=""{1}"">{2}</tr>", sdr["UnitID"].ToString(), sdr["UnitNo"].ToString(), td);
// }
//}
#endregion
for (int i = 0; i < 10; i++)
{
string td = string.Format(@"<td height=""15"" nowrap>{0}</td>", "編號");
td += string.Format(@"<td height=""15"" nowrap>{0}</td>", "姓名");
td += string.Format(@"<td height=""15"" nowrap>{0}</td>", i.ToString());
td += string.Format(@"<td height=""15"" nowrap align=""right"">{0}</td>", InputValue);
ReturnStr += string.Format(@"<tr ReturnValue=""{0},{1}"" UnitID=""{0}"" UnitNo=""{1}"">{2}</tr>", i.ToString(), InputValue, td);
}
ReturnStr += @"</table>";
}
}
}
2 引用頁面
<!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>
截個圖給大家看看