The Code is as follows:
Copy codeThe Code is as follows: <% @ Page Language = "C #" AutoEventWireup = "true" CodeFile = "Default3.aspx. cs" Inherits = "Default3" %>
<! 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 runat = "server">
<Title> No title page </title>
<Style type = "text/css"> <! --
. MouseEnter
{
Background-color: Yellow;
}
--> </Style> <style type = "text/css" bogus = "1">. mouseEnter
{
Background-color: Yellow;
}
</Style>
<Script type = "text/javascript" src = "SCRIPT/jquery-1.3.2-vsdoc2.js" src = "SCRIPT/jquery-1.3.2-vsdoc2.js"> </script>
<Script type = "text/javascript"> <! --
$ (Function (){
$ ("# Result" ).css ("position", "absolute ");
Var offset = $ ("# TextBox1"). offset ();
$ ("# Result" ).css ({left: offset. left + "px", top: offset. top + $ ("# TextBox1 "). height () + "px "});
});
// --> </Script>
</Head>
<Body>
<Form id = "form1" runat = "server" onsubmit = "alert ($ ('# TextBox1'). val ();">
<Center> <asp: TextBox ID = "TextBox1" runat = "server" width = "137px"> </asp: TextBox> </center>
<Div id = "result" style = "width: 147px;">
<Table style = "width: 100%; border-style: none solid; border-width: 1px;
Border-color: #00FF00 ">
<Tbody id = "mytable">
</Tbody>
</Table>
</Div>
</Form>
<Script type = "text/javascript"> <! --
Var size = 0; // The number of actually retrieved data entries each time (up to 10)
Var index =-1; // calculate the keydown event: td index;
Function setTdEvent () {// set the event for the generated TD
// Click the effect
$ ("# Mytable> tr> td"). click (function (){
$ ("# TextBox1"). val ($ (this). text ());
});
// Select the highlighted Effect
$ ("# Mytable> tr> td"). hover (function (){
$ (This). addClass ("mouseEnter ");
}, Function (){
$ (This). removeClass ("mouseEnter ");
});
}
Function setTD (text ){
// $ ("Tr: even" ).css ("backgroundColor", "blue ");
Return "<tr> <td style = 'border: 0px none # FFFFFF; width: 100% '>" + text + "</td> </tr> ";
}
Function setTable (msg)
{
Var tbody = $ ("# mytable ");
Var texts = msg. split (";");
Var str = "";
Size = texts. length;
For (var I = 0; I <texts. length; I ++)
{
Str + = setTD (texts [I]);
}
Tbody.html (str );
SetTdEvent ()
$ ("# Div1"). show ("fast ");
}
Function setKeyDown (str)
{
$ ("# Mytable> tr> td: eq (" + index + ")"). removeClass ("mouseEnter ");
If (str = "+ ")
{
Index = (++ index) % size;
}
Else if ("-")
{
Index = (-- index + size) % size;
}
Try {
$ ("# Mytable> tr> td: eq (" + index + ")"). addClass ("mouseEnter ");
} Catch (e ){
Alert (e );
}
}
$ (Function (){
$ ("# TextBox1"). bind ("propertychange", function (){
$ ("# Div1"). hide ("fast" ).html ("");
Index =-1;
$. Ajax ({
Type: "POST ",
Url: "Suggest. ashx ",
Data: "word =" + $ ("# TextBox1"). val () + "& time =" + new Date (). toLocaleTimeString (),
Success: function (msg ){
SetTable (msg );
}
});
});
$ ("# TextBox1"). bind ("keydown", function (event ){
If (event. keyCode = 38)
{
SetKeyDown ("-");
}
Else if (event. keyCode = 40)
{
SetKeyDown ("+ ");
}
Else if (event. keyCode = 13 & index! =-1)
{
$ ("# TextBox1"). val ($ ("# mytable> tr> td: eq (" + index + ")"). text ());
}
});
});
// --> </Script>
</Body>
</Html>
The general handler for Ajax calls is:
Copy codeThe Code is as follows: <% @ WebHandler Language = "C #" Class = "Suggest" %>
Using System;
Using System. Web;
Using System. Linq;
Using System. Xml;
Using System. Xml. Linq;
Public class Suggest: IHttpHandler
{
Public void ProcessRequest (HttpContext context)
{
HttpResponse Response = context. Response;
Response. Charset = "gb2312 ";
Response. ContentEncoding = System. Text. Encoding. UTF8;
Response. ContentType = "text/plain ";
Response. StatusCode = 200;
String start = context. Request. Params ["word"]. ToString ();
Response. Write (GetSuggest (start ));
Response. Flush ();
}
Public bool IsReusable
{
Get
{
Return false;
}
}
/// <Summary>
/// Obtain the response string
/// </Summary>
/// <Param name = "start"> query the start string </param>
/// <Returns> response string </returns>
Private string GetSuggest (string start)
{
XElement root = XElement. Load (AppDomain. CurrentDomain. SetupInformation. ApplicationBase + "Suggest. xml ");
System. Collections. Generic. IEnumerable <string>
Q = (from r in root. Elements ()
Where (r. Name). ToString (). ToLower (). StartsWith (start. ToLower ())
Select r. Name. ToString (). Take (5 );
System. Text. StringBuilder sb = new System. Text. StringBuilder ();
Foreach (string w in q)
{
Sb. Append (w + ";");
}
If (sb. Length! = 0)
Sb. Remove (sb. Length-1, 1 );
Return sb. ToString ();
}
}
The xml document is actually not a standard xml document, it is used to store data, and exercises the newly learned Linq to XML. Because I don't want to create a table, I may be a little lazy. the xml document content is randomly generated: The results shown in the following results are all randomly generated. Here is a legend: