Use jquery to simulate Google's auto-prompt effects

Attention:

1, this function uses SqlServler2000 in the sample database Northwind, please hit SP3 or SP4 patch;
2, please download the jquery components, hexi FTP download;
3, this function is similar to Google automatic prompt effect, through the Ajax engine from the server to get, return XML data;
4, this example program does not consider the performance problem;
5, does not support the Firefox browser, because the browser does not have PropertyChange events.

Steps:

1. Create a servlet named Googleservlet, which is responsible for reading data from the database and generating the data in XML format.

Package com.aptech.servlet;

Import java.io.IOException;
Import Java.io.PrintWriter;
Import java.sql.Connection;
Import Java.sql.DriverManager;
Import java.sql.PreparedStatement;
Import Java.sql.ResultSet;
Import java.sql.SQLException;

Import javax.servlet.ServletException;
Import Javax.servlet.http.HttpServlet;
Import Javax.servlet.http.HttpServletRequest;
Import Javax.servlet.http.HttpServletResponse;

public class Googleservlet extends HttpServlet {

public void Service (HttpServletRequest request, httpservletresponse response)
Throws Servletexception, IOException {
Response.setcontenttype ("Text/xml;charset=utf-8");
Request.setcharacterencoding ("Utf-8");
PrintWriter out = Response.getwriter ();
String key = Request.getparameter ("key");
try {
Class.forName ("Com.microsoft.sqlserver.jdbc.SQLServerDriver");
Connection conn = drivermanager.getconnection ("Jdbc:sqlserver://127.0.0.1:1433;databasename=northwind", "sa", "");
PreparedStatement pstmt = conn.preparestatement ("Select ShipName, Count (ShipName) as C from [orders] where is shipname like?" GROUP by ShipName ");
Pstmt.setstring (1, key + "%");

ResultSet rs = Pstmt.executequery ();

StringBuilder XML = new StringBuilder ();
Xml.append ("<results>");
if (rs! = null) {
while (Rs.next ()) {
Xml.append ("<result key=" "" "+ rs.getstring (1) +" "count=" "" + rs.getint (2) + "" "></result>");
}
}
Xml.append ("</results>");
Rs.close ();
Pstmt.close ();
Conn.close ();

Out.print (Xml.tostring ());
} catch (ClassNotFoundException e) {
TODO auto-generated Catch block
E.printstacktrace ();
} catch (SQLException e) {
TODO auto-generated Catch block
E.printstacktrace ();
}


Out.flush ();
Out.close ();
}
}

2. Define an HTML file named google.html, responsible for dynamically generating the effect of automatic prompting.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>google.html</title>

<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This is my page" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<script type= "Text/javascript" src= "Jquery-1.2.6.pack.js" ></script>

<script type= "Text/javascript" >
var line = 0;

Function del () {
if ($ ("#newDiv")) {
$ ("#newDiv"). Remove ();
line = 0;
}
}

$ (document). Ready (function () {
The layer disappears when the text box loses focus
$ (document.body). Click (function () {
Del ();
});

$ (document). KeyDown (function () {
38 on 40 lower 13 return car
if ($ ("#newDiv")) {
if (Event.keycode = = 40) {
$ ("Table Tbody tr"). EQ (line)
. CSS ("BackgroundColor", "Blue")
. CSS ("Color", "white");
$ ("Table Tbody tr"). EQ (Line < 0? 0:line-1)
. CSS ("BackgroundColor", "white")
. CSS ("Color", "black");
Line = (line = = $ ("Table Tbody tr"). Length 0:line + 1);
}else if (Event.keycode = = 38) {
Line = (line = = 0? $ ("Table Tbody tr"). length:line-1);
$ ("Table Tbody tr"). EQ (line)
. CSS ("BackgroundColor", "Blue")
. CSS ("Color", "white");
$ ("Table Tbody tr"). EQ (Line > $ ("Table Tbody tr"). Length 0:line + 1)
. CSS ("BackgroundColor", "white")
. CSS ("Color", "black");
}else if (Event.keycode = = 13) {
$ ("#key"). Val ($ ("Table Tbody tr"). EQ (line-1). Find ("TD"). EQ (0). html ());
Del ();
}
}
});

$ ("#key"). Bind ("PropertyChange", function () {
Del ();

var top = $ ("#key"). Offset (). Top;
var left = $ ("#key"). Offset (). Left;
var newdiv = $ ("<div/>"). Width ($ ("#key"). Width () + 6)
. css ("position", "absolute")
. CSS ("BackgroundColor", "white")
. CSS ("left", left)
. CSS ("top", Top + $ ("#key"). Height () + 6)
. CSS ("Border", "1px solid Blue")
. attr ("id", "newdiv");

var table = $ ("<table width= ' 100% '/>")
. attr ("cellpadding", "0")
. attr ("cellspacing", "0");

$.post ("Googleservlet", {key: $ ("#key"). Val ()}, function (XML) {
$ (XML). Find ("results result"). each (function () {
var key = $ (this). attr ("key");
var count = $ (this). attr ("Count");

var tr = $ ("<tr/>"). CSS ("cursor", "pointer"). Mouseout (function () {
$ (this). CSS ("BackgroundColor", "White"). CSS ("Color", "black");
}). mouseover (function () {
$ (this). CSS ("BackgroundColor", "Blue"). CSS ("Color", "white");
}). Click (function () {
$ ("#key"). Val ($ (this). FIND ("TD"). EQ (0). html ());

Del ();
});
var TD1 = $ ("<td/>"). HTML (key). CSS ("FontSize", "12px")
. CSS ("margin", "5 5 5 5");
var TD2 = $ ("<td/>"). HTML ("Total" + count + "results")
. attr ("Align", "right"). CSS ("FontSize", "12px")
. CSS ("Color", "green"). CSS ("margin", "5 5 5 5");

Tr.append (TD1). Append (TD2);
Table.append (TR);
Newdiv.append (table);
});
});

$ (document.body). Append (Newdiv);

if ($ ("#key"). val () = = "") {
$ ("#newDiv"). Remove ();
}
});
});
</script>

<body>
<div style= "margin-top:20px; margin-left:30px ">
Please enter search keywords: <input name= "key" id= "key" style= "width:300" >
<input type= "button" value= "Goolge" >
</div>
</body>

3, the final effect: