The JS class is automatically completed, and the user experience is better. Encapsulated into a class for ease of use. Site 1. encapsulated JS files
//************************************** ******************
// Creation date:
// OPERATOR: oloen
// Content Description: Automatically complete the JS class
// Usage:
// Var auto = new autoComplete (Client ID );
// Auto. Init (document. all. Client ID );
//************************************** ******************
// 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 = '';
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 + 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 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), 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)
Return;
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 ()
{
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. Background query page
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.
//************************************** ******************
///
/// Automatically complete the background query page
///
Public partial class Common_AutoComplete: System. Web. UI. Page
{
Const string tbStyle = @"";
///
/// Filter Condition
///
String Filter = string. Empty;
///
/// Query value
///
String InputValue = string. Empty;
///
/// Automatic completion category
/// Currently, only UnitNo queries are supported.
///
String Type = string. Empty;
///
/// Return result character
///
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 ("'","''");
}
///
/// The sales system room number is automatically completed
///
Void AutoPSUnitNo ()
{
If (! String. IsNullOrEmpty (InputValue ))
{
ReturnStr = @"
";# Region database operations// 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 (@"
{0} | ", Sdr [" ProjectNo "]. ToString ());/// Td + = string. Format (@"
{0} | ", Sdr [" PhaseNo "]. ToString ());/// Td + = string. Format (@"
{0} | ", Sdr [" BlockNo "]. ToString ());// Td + = string. Format (@"
{0} | ", Sdr [" UnitNo "]. ToString ());// ReturnStr + = string. Format (@"
{2}
", Sdr [" UnitID "]. ToString (), sdr [" UnitNo "]. ToString (), td );//}//}# EndregionFor (int I = 0; I <10; I ++){String td = string. Format (@"
{0} | "," No ");Td + = string. Format (@"
{0} | "," Name ");Td + = string. Format (@"
{0} | ", I. ToString ());Td + = string. Format (@"
{0} | ", InputValue );ReturnStr + = string. Format (@"
{2}
", I. ToString (), InputValue, td );}ReturnStr + = @"
";
}
}
}
2 reference page