Using Ajax to implement a Google search box-like function

Source: Internet
Author: User

First page;

function Gethttpobject ()
{
var waystation=null;
if (window. ActiveXObject)
{
Waystation=new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest)
{
Waystation=new XMLHttpRequest ();
}
Else
{
Waystation=false;
}
return waystation;
}
function Addcitys ()
{
Inputfield = document.getElementById ("TextField");
completetable = document.getElementById ("table1");
Completediv = document.getElementById ("popup");
Completebody = document.getElementById ("body1");
var s=document.all.item ("TextField"). Value
var Aa=encodeuri (s);
if (s== "")
Return
var xmlrequest=gethttpobject ();
Xmlrequest.open ("Post", "getcity.aspx?id=" +AA);
Xmlrequest.onreadystatechange=function ()
{
if (xmlrequest.readystate==4)
{
//xmlrequest.responsetext is the string that you output in your addcity;
Setnames (Xmlrequest.responsetext);
}
}
Xmlrequest.send (NULL);
}

/Generate match line to input content
function Setnames (names)
{
if (names== "")
{
Clearnames ();
Return
}
Clearnames ();
Setoffsets ();
var row, cell, Txtnode;
var s=names.split ("$");

for (var i = 0; i < s.length; i++)

{

S[i] for TD
var nextnode =s[i];
row = Document.createelement ("tr");
Cell = document.createelement ("TD");
Cell.onmouseout = function () {this.style.backgroundcolor= ';};
Cell.onmouseover = function () {this.style.backgroundcolor= ' #ffff00 ';};
Cell.onclick = function () {Completefield (this);};
cell.pop= "T";
Txtnode = document.createTextNode (NextNode);
Cell.appendchild (Txtnode);
Row.appendchild (cell);
document.getElementById ("Body1"). appendchild (row);
}
}

Used to set the hidden text box when the mouse loses focus
Document.onmousedown=function ()
{
if (!event.srcelement.pop)
Clearnames ();
}//fill in the input box
function Completefield (cell)
{
Inputfield.value = Cell.firstChild.nodeValue;
Clearnames ();
}
Clear Auto-complete line
function Clearnames ()
{
Completebody = document.getElementById ("body1");
var ind = CompleteBody.childNodes.length;
for (var i = ind-1; I >= 0; i--)
{
Completebody.removechild (Completebody.childnodes[i]);
}
Completediv = document.getElementById ("popup");
CompleteDiv.style.border = "None";
}

Set Display location
function Setoffsets ()
{
CompleteTable.style.width = Inputfield.offsetwidth; + "px";
var left = Calculateoffset (Inputfield, "offsetleft");
var top = Calculateoffset (Inputfield, "OffsetTop") + Inputfield. offsetheight;
CompleteDiv.style.border = "Black 1px solid";
CompleteDiv.style.left = left + "px";
CompleteDiv.style.top = top + "px";
}
function Calculateoffset (field, attr) {
var offset = 0;
while (field) {
Offset + = field[attr];
field = Field.offsetparent;
}
return offset;
}

<body>
<input name= "TextField" id= "TextField" type= "text" class= "input1" onkeyup= "Addcitys ();" Maxlength= "style=" width:68px "/><div id=" popup "style=" Position:absolute ">
<table id= "table1" cellspacing= "0" cellpadding= "0" bgcolor= "#fffafa" border= "0" >
<tbody id= "Body1" >
</tbody>
</table>
</div>

</body>

second page (getcity.aspx)

Note: You must remove all HTML from this page

then in the CS file do the processing you want, as a string input;

GetCity.cs

String id = request.querystring["id"]. ToString ();
SqlConnection con = new SqlConnection (SQLSTR);
Con. Open ();
SqlDataAdapter da = new SqlDataAdapter ("select * from Airport where enname like '%" + ID + "% ' or cnname like '%" +id+ "% '" , con);
DataSet ds = new DataSet ();
Da. Fill (DS);
StringBuilder sb = new StringBuilder ();
for (int i = 0; I < ds. Tables[0]. Rows.Count; i++)
{
Sb. Append (ds. Tables[0]. ROWS[I][2]. ToString () + "" +ds. Tables[0]. ROWS[I][1]. ToString () + "$");
}
Response.Write (sb.) ToString ());

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.