Automatically complete JS class (pure JS, Ajax Mode)

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 ("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 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.
//************************************** ******************
/// <Summary>
/// Automatically complete the background query page
/// </Summary>
Public partial class Common_AutoComplete: System. Web. UI. Page
{
Const string tbStyle = @"";
/// <Summary>
/// Filter Condition
/// </Summary>
String Filter = string. Empty;
/// <Summary>
/// Query value
/// </Summary>
String InputValue = string. Empty;
/// <Summary>
/// Automatic completion category
/// Currently, only UnitNo queries are supported.
/// </Summary>
String Type = string. Empty;
/// <Summary>
/// Return result character
/// </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>
/// The sales system room number is automatically completed
/// </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 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 (@ "<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> "," No ");
Td + = string. Format (@ "<td height =" 15 "" nowrap >{0} </td> "," name ");
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 reference page
<! 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> No title 1 </title>
</Head>
<Body>
<Input id = "t1" type = "text">
<Script>
Var auto = new autoComplete ('t1 ')
Auto. Init (document. all. t1 );
// The selected task
Function ReturnAutoComplete (ReturnValue)
{
Alert (ReturnValue)
}
</Script>
</Body>
</Html>
Let's take a look at the screenshot.

Package