JS Automatic completion of AutoComplete (Ajax query) _javascript skills

One: JS part

Copy Code code as follows:

//********************************************************
Date Created: 2009-03-10
Author: Oloen
Content Description: Automatic completion of 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 complete a bound 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 = = | | event.keycode = = | | event.keycode = 13)
{
Me. SelectItem ();
}
Else
{
Restore Drop-down selection 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 ()
{
Results
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 = = && Me.currentindex > 0)
me.currentindex--;
Down
if (Event.keycode = = && Me.currentindex < maxRow-1)
me.currentindex++;
Enter
if (Event.keycode = 13)
{
Me. Select ()
Me. Inititem ();
Return
}
if (result.rows[me.currentindex]!=undefined)
{
Select 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 Background Query page

Copy Code code 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;
//********************************************************
Date Created: 2009-03-10
Author: Oloen
Content Description: Automatic completion of the background query page
Type:pssale Contract Inquiry
Type:psunit Room Enquiries
//********************************************************
<summary>
Automatically complete the background query page
</summary>
public partial class Common_AutoComplete:System.Web.UI.Page
{
Const string Tbstyle = @ "style=" "Color: #F7922E" "";
<summary>
Filter conditions
</summary>
String Filter = String. Empty;
<summary>
Query value
</summary>
String inputvalue = String. Empty;
<summary>
Auto-Complete Category
Type:pssale Contract Inquiry
Type:psunit Room Enquiries
</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 "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 ']?? "";
}
<summary>
Sales System room number is completed automatically
</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; "" > ";
String Sql = String. Format (@ Select top unitid,unitno,projectno,phaseno,blockno from View_ps_unit WHERE unitno like '%{0}% ' and {1} ', Input Value, Filter);
if (Type.tolower (). Equals ("Pssale"))
SQL = string. Format (@ Select top 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 (@ "<td height=" "nowrap>{0}</td>", sdr["Projectno"). ToString ());
TD + + String. Format (@ "<td height=" "nowrap>{0}</td>", sdr["Phaseno"). ToString ());
TD + + String. Format (@ "<td height=" "nowrap>{0}</td>", sdr["Blockno"). ToString ());
TD + + String. Format (@ "<td height=" "NoWrap align=" "Right" "{1}>{0}</td>", sdr["Unitno"]. ToString (), Tbstyle);
if (Type.tolower (). Equals ("Pssale"))
{
Returnstr = = String. Format (@ "<tr returnvalue=" "{0},{1},{2},{3},{4},{5},{6}" ">{7}</tr>",
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 (@ "<tr returnvalue=" "{0},{1}" ">{2}</tr>", sdr["Unitid"]. ToString (), sdr["Unitno"]. ToString (), TD);
}
}
Returnstr = @ "</table>";
}
}
}

3 Call Section

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<meta http-equiv=" content- Type "content=" text/html; charset=gb-2312 "/>
<script type=" Text/javascript "src=". /js/autocomplete.js "></script>
<title> Untitled 1</title>

<body> ;
<input id= "T1" type= "text" >

<script>
var auto = new AutoComplete (' t1 ')
Auto. Init (DOCUMENT.ALL.T1);

//Selected things to do
function Returnautocomplete (returnvalue)
{
Alert (returnvalue)
}
</scr Ipt>
</body>