Javascript AutoComplete (Ajax query) _ javascript skills

A drop-down list similar to Baidu or Google search is used to open Baidu and enter the search conditions. As soon as you enter the drop-down list, a drop-down list box is automatically displayed, showing all the search content.
I. JS part

The Code is as follows:

//************************************** ******************
// Creation date:
// OPERATOR: oloen
// Content Description: Automatically complete the JS class
// Usage:
// Var auto = new autoComplete (Client ID );
// Auto. Init (document. all. Client ID );
// Auto. Type = 'psunit '// PSSale
//************************************** ******************
// Automatic completion
Function autoComplete (id)
{
Var me = this;
// Automatically bind the 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 ("p ");
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 press ENTER
If (event. keyCode = 38 | event. keyCode = 40 | event. keyCode = 13)
{
Me. SelectItem ();
}
Else
{
// Select-1 from the restore drop-down list.
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 --;
// Downward
If (event. keyCode = 40 & me. currentIndex <maxRow-1)
Me. currentIndex ++;
// Press ENTER
If (event. keyCode = 13)
{
Me. Select ()
Me. InitItem ();
Return;
}
If (result. rows [me. currentIndex]! = Undefined)
{
// Select the color
Result. rows [me. currentIndex]. style. backgroundColor = "# limit 1ce ";
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;
// The first record by default
If (me. currentIndex <0)
Me. currentIndex = 0;
Var ReturnValue = result. rows [me. currentIndex]. ReturnValue;
If (ReturnValue! = Undefined)
{
Me. DivResult. style. display = 'none ';
// Set the 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. Background query page

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:
// OPERATOR: Oloen
// Content Description: the background query page is automatically completed.
// Type: pssale contract Query
// Type: psunit room Query
//************************************** ******************
///

/// Automatically complete the background query page
///
Public partial class Common_AutoComplete: System. Web. UI. Page
{
Const string tbStyle = @ "style =" "color: # F7922E """;
///
/// Filter Condition
///
String Filter = string. Empty;
///
/// Query value
///
String InputValue = string. Empty;
///
/// Automatic completion category
/// Type: pssale contract Query
/// Type: psunit room Query
///
String Type = string. Empty;
///
/// 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, sellinuplice, 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 ["sellinuplice"]. ToString (), td );}ElseReturnStr + = string. Format (@" {2} ", Sdr [" UnitID "]. ToString (), sdr [" UnitNo "]. ToString (), td );}}ReturnStr + = @"

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

";
}
}
}

3 call part

The Code is as follows: