One, the package JS file
//********************************************************
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);
//********************************************************
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 = ';
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 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), 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)
Return
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 ()
{
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;
//********************************************************
Date Created: 2009-03-10
Author: Oloen
Content Description: Automatic completion of the background query page
//********************************************************
<summary>
Automatically complete the background query page
</summary>
public partial class Common_AutoComplete:System.Web.UI.Page
{
Const string Tbstyle = @ "";
<summary>
Filter conditions
</summary>
String Filter = String. Empty;
<summary>
Query value
</summary>
String inputvalue = String. Empty;
<summary>
Auto-Complete Category
Currently only support sales system Unitno Query
</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>
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; "" > ";
#region Database Operations
String Sql = String. Format (@ Select top 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=" "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" ">{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 < i++)
{
String td = String. Format (@ "<td height=" "," "nowrap>{0}</td>", "number");
TD + + String. Format (@ "<td height=" "nowrap>{0}</td>", "name");
TD + + String. Format (@ "<td height=" "Nowrap>{0}</td>", i.ToString ());
TD + + String. Format (@ "<td height=" "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 References Page
<! 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);
What to do When selected
function Returnautocomplete (returnvalue)
{
Alert (returnvalue)
}
</script>
</body>
Cut a picture for everyone to see
Package Download Address
