JS automatic completion AutoComplete (Ajax query)_javascript skills

1: JS part

Copy code The code is as follows:

//****************************************** ****************
//Creation date: 2009-03-10
//Author: oloen
//Content description: Auto-complete JS class
//Usage:
// var auto = new autoComplete(Client ID);
// auto.Init(document.all.Client ID);
// auto.Type = 'PSUnit' //PSSale
//****************************************** ****************
//Autocomplete
function autoComplete(id)
{
var me = this;
//Autocomplete binding Control client 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 you press up, down or enter
if (event.keyCode == 38 || event.keyCode == 40 || event.keyCode == 13)
{
me.SelectItem();
}
else
{
//Restore the drop-down selection item to -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()
{
//result
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;
//up
if (event.keyCode == 38 && me.currentIndex > 0)
me.currentIndex--;
//Down
if (event.keyCode == 40 && me.currentIndex < maxRow-1)
me.currentIndex;
//Enter
if (event.keyCode == 13)
{
me.Select()
me.InitItem();
return;
}
if(result.rows[me.currentIndex]!=undefined)
{
//Selected color
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;
//Default first record
if(me.currentIndex < 0)
me.currentIndex = 0;
var ReturnValue = result.rows [me.currentIndex].ReturnValue;
if(ReturnValue != undefined)
{
me.DivResult.style.display = 'none';
//Set page value
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 Backend query page

Copy code The code is as follows:

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;
//************************************************ ***************
//Creation date: 2009-03-10
//Author: Oloen
//Content description: Automatically complete the background query page
// Type:pssale contract inquiry
// Type:psunit room inquiry
//************************** ****************************
///

/// Automatically complete background query Page
///

public partial class Common_AutoComplete : System.Web.UI.Page
{
const string tbStyle = @"color:#F7922E"" ";
///

/// Filter conditions
///

string Filter = string.Empty;
/// /// Query value
///
string InputValue = string.Empty;
///

/// Autocomplete category
/// Type: pssale contract query
/// Type: psunit room query
///

string Type = string.Empty;
/// < summary>
/// Return result character
///
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"] ?? "";
}
///

/// The sales system room number is automatically completed
/ //

void AutoPSUnitNo()
{
if (!string.IsNullOrEmpty(InputValue))
{
ReturnStr = @"";
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(@"", sdr[ "ProjectNo"].ToString());
//td = string.Format(@"", sdr["PhaseNo" ].ToString());
//td = string.Format(@"", sdr["BlockNo"].ToString ());
td = string.Format(@"", sdr[ "UnitNo"].ToString(), tbStyle);
if (Type.ToLower().Equals("pssale"))
{
ReturnStr = string.Format(@"{7}",
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(@"{2}", sdr["UnitID"].ToString(), sdr["UnitNo"]. ToString(), td);
}
}
ReturnStr = @"

{0}	{0}	{0}	{0}

";
}
}
}

3 Calling part

Copy code The code is as follows:

<script> <br>var auto = new autoComplete('t1') <br>auto.Init(document.all.t1); <br><br>//选中后做的事情 <br>function ReturnAutoComplete(ReturnValue) <br>{ <br>alert(ReturnValue) <br>} <br></script>